/* ================================================================
   YumeList - index.html (l'app : Ma Liste, Découvrir, News,
   Explorer, Calendrier, Surprise, Nous contacter + modales)
   ----------------------------------------------------------------
   Chargée après styles.css (le socle). Tout ce qui est ici n'existe
   que sur index.html. Les classes accrochées par le JS (renderList,
   showSection, renderSeasonalGrid, …) gardent leur nom ; seul leur
   dessin change.

   Composition : la page est une « édition » - un titre Noto Serif JP
   par section, des blocs séparés par des filets d'1px, des affiches
   qui sont le contenu (l'image EST la carte), et une seule matière
   d'encre sur tout le fond.
   ================================================================ */

/* ============================================================
   1. COQUILLE
============================================================ */
body.app-shell { padding-bottom: 96px; }

.ym-page { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* En-tête de section - le titre est la voix, le méta reste discret */
.ym-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px;
  flex-wrap: wrap;
  padding: clamp(44px, 6vw, 72px) 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.ym-section-head .ym-title { margin: 0; }
.ym-section-head .ym-meta { margin-top: 10px; font: 400 13.5px/1.6 var(--font-body); color: var(--text-2); max-width: 56ch; text-wrap: pretty; }
.ym-section-head__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ym-tool--slots { display: none !important; }
/* Outils de Ma Liste en icônes seules, à toutes les tailles (nom au survol,
   via title) : avec leurs libellés, la barre ne tenait plus à côté d'un titre
   long (« Ma liste complète », devenu « Ma liste ») et passait à la ligne, à gauche. Si elle doit
   quand même passer à la ligne (écran étroit), elle reste calée à droite. */
.content .ym-section-head__tools { margin-left: auto; gap: 8px; }
.content .ym-section-head__tools .ym-search { width: 220px; min-width: 0; }
.content .ym-tool { width: 40px; height: 40px; padding: 0 !important; flex-shrink: 0; }
.content .ym-tool span { display: none; }
.content .ym-tool .ico { width: 16px; height: 16px; }

/* Barre d'outils : un seul trait, jamais des boutons flottants */
.ym-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.ym-toolbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ym-toolbar__lbl { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-right: 8px; }

/* Segment de tri (Récents / Note / Titre / Progression / Genre) */
.sort-btn, .season-filter-btn, .season-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--r-ctrl);
  border: 1px solid transparent; background: transparent;
  font: 500 12.5px/1 var(--font-body); color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sort-btn:hover, .season-filter-btn:hover, .season-nav-btn:hover { color: var(--text); background: var(--glass); }
/* Tri et genres : des mots soulignés d'un filet d'encre, trait sakura sous le choix */
.sort-btn, .season-filter-btn {
  border-radius: 0; padding: 0 4px; margin: 0 6px;
  box-shadow: inset 0 -1px 0 var(--border-2);
  transition: color .2s ease, box-shadow .2s ease;
}
.sort-btn:hover, .season-filter-btn:hover { background: none; box-shadow: inset 0 -1px 0 var(--text-3); }
.sort-btn.active, .season-filter-btn.active { color: var(--sakura); background: none; box-shadow: inset 0 -2px 0 var(--sakura); }
.sort-btn:first-child, .season-filter-btn:first-child { margin-left: 0; }
/* Fleur de sakura devant ce qui est choisi (règle et animation dans styles.css) */
.chip.active { gap: 6px; }
:is(.sort-btn, .season-filter-btn, .chip, .cal-tab).active::before {
  content: ''; width: 14px; height: 14px; margin-left: -2px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--fleur) center / contain no-repeat; mask: var(--fleur) center / contain no-repeat;
  animation: ym-eclosion .45s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) { :is(.sort-btn, .season-filter-btn, .chip, .cal-tab).active::before { animation: none; } }
/* Sur papier, --sakura tombe à 4,2:1 dans son propre voile : un cran plus foncé */
:root[data-theme="light"] .sort-btn.active,
:root[data-theme="light"] .season-filter-btn.active,
:root[data-theme="light"] .list-nav-item.active .list-nav-count { color: var(--sakura-2); }
.season-nav-btn { border-color: var(--border-2); }
.season-nav-btn:hover { border-color: var(--text-3); }

.view-mode-btn {
  width: 34px; height: 34px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--text-3);
  cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.view-mode-btn svg { width: 15px; height: 15px; }
.view-mode-btn:hover { color: var(--text); border-color: var(--text-3); }
.view-mode-btn.active { color: var(--sakura); border-color: var(--sakura-line); background: var(--sakura-soft); }

/* Recherche inline (Ma Liste, Explorer) */
.ym-search {
  position: relative; display: flex; align-items: center;
  height: 40px; min-width: 240px; padding: 0 12px 0 14px;
  border: 1px solid var(--border-2); border-radius: var(--r-ctrl);
  background: var(--ink);
  transition: border-color .2s ease;
}
.ym-search:focus-within { border-color: var(--sakura-line); }
.ym-search svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.ym-search input {
  flex: 1; min-width: 0; height: 100%; margin-left: 10px;
  background: none; border: none; outline: none;
  font: 400 13.5px var(--font-body); color: var(--text);
}
.ym-search input::-webkit-search-cancel-button, .ym-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ym-search__clear {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--text-3); cursor: pointer; font-size: 12px; flex-shrink: 0;
  transition: color .2s ease, background .2s ease;
}
.ym-search__clear:hover { color: var(--text); background: var(--glass-2); }

/* Sélecteur natif habillé */
.ym-select {
  height: 34px; padding: 0 32px 0 14px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: var(--ink);
  color: var(--text-2); font: 500 12.5px var(--font-body); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239e9a94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .2s ease, color .2s ease;
}
.ym-select:hover { border-color: var(--text-3); color: var(--text); }
.ym-select:focus { border-color: var(--sakura-line); outline: none; }
.ym-select option { background: var(--ink-2); color: var(--text); }

/* Rangée de puces de genre (Explorer, panneau Genre) */
.chip {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 13px; 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;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip.active { color: var(--sakura); border-color: var(--sakura-line); background: var(--sakura-soft); }

/* Panneau Genre (dropdown du tri) */
#genrePanel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  width: 320px; max-height: 300px; overflow-y: auto;
  padding: 14px;
  background: var(--ink-2); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
#genrePanelList { display: flex; flex-wrap: wrap; gap: 6px; }

/* Pagination : chiffres nus séparés par des filets */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 40px; flex-wrap: wrap; }
.pagination:empty { display: none; }
.page-btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-ctrl);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px var(--font-body); color: var(--text-2);
  border: 1px solid transparent; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.page-btn:hover { color: var(--text); border-color: var(--border-2); }
.page-btn.active { background: var(--sakura-deep); color: #fff; }
.page-btn.disabled { opacity: .3; cursor: not-allowed; }

/* Chargement / vides dans une grille */
/* ============================================================
   REPRENDRE - rangée des séries en cours, en tête de Ma Liste
============================================================ */
.ym-resume { margin: 4px 0 22px; }
.ym-resume__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ym-resume__head b { font: 500 17px var(--font-jp); color: var(--text); }
.ym-resume__head span { font: 400 12px var(--font-body); color: var(--text-3); }
/* Rangée défilante : la section garde la même hauteur qu'on suive trois
   séries ou trente. Fondus sur les bords quand il reste à voir d'un côté. */
.ym-resume__wrap { position: relative; min-width: 0; }
.ym-resume__rail {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0;
  scrollbar-width: none; min-width: 0;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  --resume-fade-l: 0%; --resume-fade-r: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--resume-fade-l), #000 var(--resume-fade-r), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--resume-fade-l), #000 var(--resume-fade-r), transparent 100%);
}
.ym-resume__rail::-webkit-scrollbar { display: none; }
.ym-resume__rail.can-prev { --resume-fade-l: 5%; }
.ym-resume__rail.can-next { --resume-fade-r: 95%; }
.ym-resume__nav {
  position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 50%;
  background: var(--ink-2); color: var(--text-2); cursor: pointer; padding: 0;
  transition: opacity .25s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.ym-resume__nav .ico { width: 15px; height: 15px; }
.ym-resume__nav.is-prev { left: -14px; }
.ym-resume__nav.is-prev .ico { transform: rotate(180deg); }
.ym-resume__nav.is-next { right: -14px; }
.ym-resume__nav:hover { color: var(--text); border-color: var(--sakura); background: var(--ink-3); }
.ym-resume__nav:disabled { opacity: 0; pointer-events: none; }
/* Sur un écran tactile, on fait glisser au doigt : les flèches n'ont pas
   lieu d'être et prendraient la place d'une carte. */
@media (hover: none) { .ym-resume__nav { display: none; } }
.ym-resume__card {
  /* Billet de séance : affiche, titre, puis un pointillé à deux encoches
     et le talon (le bouton), détachés par un masque. */
  --talon: 74px;
  display: grid; grid-template-columns: 58px minmax(0, 1fr) var(--talon);
  flex: 0 0 312px; height: 100px; scroll-snap-align: start;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--ink-2); cursor: pointer;
  -webkit-mask: radial-gradient(circle 7px at calc(100% - var(--talon)) 0, transparent 97%, #000 100%),
                radial-gradient(circle 7px at calc(100% - var(--talon)) 100%, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ym-resume__card:hover { border-color: var(--border-2); background: var(--ink-3); transform: translateY(-2px); }
/* Sceau 完 (sceau-termine.js) frappé à cheval sur le pointillé du talon */
.ym-resume__card .ym-kan { right: calc(var(--talon) - 29px); top: 21px; width: 58px; }
.ym-resume__poster {
  position: relative; height: 78px; margin: 10px 0 10px 10px;
  border-radius: 3px; overflow: hidden; background: var(--ink-3);
}
.ym-resume__poster img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.ym-resume__body { min-width: 0; padding: 12px 12px 10px 14px; display: flex; flex-direction: column; }
.ym-resume__title {
  font: 500 14px/1.3 var(--font-jp); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ym-resume__next {
  margin-top: auto; font: 400 11.5px var(--font-body); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Pellicule : une image par épisode, perforations dessus et dessous. */
.ym-film {
  position: relative; display: flex; gap: 2px; margin-top: 7px; padding: 5px 3px;
  background: var(--ink-3); border-radius: 2px;
}
.ym-film::before, .ym-film::after {
  content: ''; position: absolute; left: 3px; right: 3px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
}
.ym-film::before { top: 2px; }
.ym-film::after { bottom: 2px; }
.ym-film span { flex: 1; height: 9px; border-radius: 1px; background: var(--ink-4); }
.ym-film span.is-vu { background: var(--text-3); opacity: .6; }
.ym-film span.is-suivant { background: transparent; box-shadow: inset 0 0 0 1px var(--sakura); }
.ym-film span.is-vide { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
/* Le talon : « ép. 18 » au repos, « Vu » au survol. */
.ym-resume__btn {
  position: relative; overflow: hidden; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-left: 1px dashed var(--border-2); background: transparent;
  color: var(--text); cursor: pointer;
  transition: background .2s ease;
}
.ym-resume__btn i { font: 500 10px var(--font-body); font-style: normal; color: var(--text-3); transition: opacity .2s ease; }
.ym-resume__btn b { font: 500 27px/1 var(--font-jp); color: var(--sakura); transition: opacity .2s ease; }
.ym-resume__btn b.is-long { font-size: 20px; }
.ym-resume__vu {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  font: 600 12px var(--font-body); color: var(--white);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .25s var(--ease);
}
.ym-resume__fleur {
  width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--fleur) center / contain no-repeat; mask: var(--fleur) center / contain no-repeat;
}
.ym-resume__btn:hover:not(:disabled), .ym-resume__btn:focus-visible { background: var(--sakura-deep); }
.ym-resume__btn:hover:not(:disabled) i, .ym-resume__btn:hover:not(:disabled) b,
.ym-resume__btn:focus-visible i, .ym-resume__btn:focus-visible b { opacity: 0; }
.ym-resume__btn:hover:not(:disabled) .ym-resume__vu, .ym-resume__btn:focus-visible .ym-resume__vu { opacity: 1; transform: none; }
.ym-resume__btn:disabled { cursor: default; }
.ym-resume__btn:disabled b { opacity: .5; }
.ym-resume__btn.is-poincon b { animation: ym-poincon .45s var(--ease); }
@keyframes ym-poincon { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ym-resume__rail { scroll-behavior: auto; }
  .ym-resume__btn.is-poincon b { animation: none; }
}
/* Questionnaire d'accueil : une grille de pastilles qui respire, pour que le
   choix se fasse d'un coup d'œil plutôt qu'en lisant une liste. */
.ym-welcome { max-width: 560px; }
.ym-welcome__intro { font: 400 13.5px/1.6 var(--font-body); color: var(--text-2); margin-bottom: 20px; }
.ym-welcome__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ym-welcome__chips .af-chip { cursor: pointer; }
.ym-welcome__count { margin-top: 16px; font: 400 12px var(--font-body); color: var(--text-3); }
@media (max-width: 560px) {
  .ym-welcome__chips { gap: 7px; }
  .ym-welcome__chips .af-chip { padding: 8px 13px; font-size: 12px; }
}

/* « La suite de tes séries » : même rangée que « Reprendre », mais c'est une
   suggestion et non une reprise - la raison est en gris et non en sakura, pour
   que l'œil aille d'abord au titre. Vit dans Explorer, entre l'en-tête et les
   filtres : deux rangées au-dessus de Ma Liste, c'était une de trop. */
.ym-nextup { margin: 4px 0 26px; }
/* Largeur tenue : sans min-width, une raison longue (qui ne passe
   pas à la ligne) élargissait la carte au lieu de se couper en « … ». */
.ym-nextup .ym-resume__card { min-width: 0; }
.ym-nextup__why { color: var(--text-3); }
@media (max-width: 620px) {
  /* Une carte pleine largeur moins un aperçu de la suivante : c'est cet
     aperçu qui dit qu'il y a autre chose à droite. */
  .ym-resume__card { flex-basis: min(312px, 84vw); }
  .ym-resume { margin-bottom: 18px; }
}

/* ============================================================
   SQUELETTES DE CHARGEMENT
   Une silhouette à la forme du contenu attendu plutôt qu'un rouet :
   la page ne saute plus au moment où les données arrivent.
============================================================ */
.sk { position: relative; overflow: hidden; background: var(--ink-3); border-radius: var(--r); }
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--veil), transparent);
  animation: skShimmer 1.5s ease-in-out infinite;
}
@keyframes skShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

.sk-card { display: flex; flex-direction: column; gap: 9px; }
.sk-poster { aspect-ratio: 2 / 3; border-radius: var(--r-lg); }
.sk-line { height: 11px; }
.sk-line.is-short { width: 55%; }
.sk-line.is-mid { width: 75%; }
.sk-thumb { width: 54px; height: 76px; border-radius: var(--r); flex-shrink: 0; }
.sk-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.sk-row:last-child { border-bottom: none; }
.sk-row__body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sk-panel { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sk-news__hero { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 26px; }
.sk-news__img { min-height: 300px; border-radius: 0; }
.sk-news__side { padding: 28px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.sk-news__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sk-news__cell { height: 190px; }
/* Rangée « Sorties du jour » : même gabarit qu'une carte du rail */
.sk-today { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-ctrl); flex-shrink: 0; width: 230px; }
.sk-today__dot { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.sk-today__body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
@media (max-width: 900px) {
  .sk-news__hero { grid-template-columns: 1fr; }
  .sk-news__img { min-height: 200px; }
  .sk-news__grid { grid-template-columns: repeat(2, 1fr); }
}

.ym-loading-row {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 56px 0; color: var(--text-3); font: 400 13px var(--font-body);
}
.discover-empty {
  grid-column: 1 / -1; text-align: center; padding: 72px 24px;
  color: var(--text-3); font: 400 14px/1.7 var(--font-body);
}
.discover-empty-icon { display: none; }
.discover-empty b { display: block; font: 500 var(--fs-sub)/1.4 var(--font-jp); color: var(--text-2); margin-bottom: 8px; }

/* ============================================================
   2. HERO INVITÉ - l'accueil sans compte, dans la voix de la landing
============================================================ */
#guestHero { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--border); }
.ym-guest { text-align: center; }
.ym-guest .ym-display { max-width: 16ch; margin: 0 auto; }
.ym-guest .ym-lead { margin: 22px auto 34px; max-width: 46ch; text-align: center; }
.ym-guest__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.ym-guest__stats {
  display: inline-grid; grid-template-columns: repeat(3, auto); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.ym-guest__stat { background: var(--ink); padding: 18px 32px; text-align: left; }
.ym-guest__stat b { display: block; font: 600 26px/1 var(--font-body); color: var(--text); letter-spacing: -.02em; }
.ym-guest__stat b.is-accent { color: var(--sakura); }
.ym-guest__stat span { display: block; margin-top: 8px; font: 500 11px var(--font-body); color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; }

/* ============================================================
   3. SORTIES DU JOUR - bande horizontale en tête de l'app
============================================================ */
.ym-today { border-bottom: 1px solid var(--border); }
.ym-today__inner { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; padding-block: 22px; }
.ym-today__head { display: flex; flex-direction: column; gap: 6px; }
.ym-today__head b { font: 500 19px/1.2 var(--font-jp); color: var(--text); }
.ym-today__head span { font: 400 12.5px var(--font-body); color: var(--text-3); }
.ym-today__rail { position: relative; min-width: 0; }
.ym-today__list {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; min-width: 0;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  --today-fade-l: 0%; --today-fade-r: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--today-fade-l), #000 var(--today-fade-r), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--today-fade-l), #000 var(--today-fade-r), transparent 100%);
}
.ym-today__list.can-prev { --today-fade-l: 6%; }
.ym-today__list.can-next { --today-fade-r: 94%; }
.ym-today__list.is-dragging { scroll-behavior: auto; cursor: grabbing; user-select: none; }
.ym-today__nav {
  position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 50%; background: var(--ink-2); color: var(--text-2);
  cursor: pointer; padding: 0;
  transition: opacity .25s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.ym-today__nav .ico { width: 15px; height: 15px; }
.ym-today__nav.is-prev { left: -14px; }
.ym-today__nav.is-prev .ico { transform: rotate(180deg); }
.ym-today__nav.is-next { right: -14px; }
.ym-today__nav:hover { color: var(--text); border-color: var(--sakura); background: var(--ink-3); }
.ym-today__nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) { .ym-today__nav { display: none; } }

/* ============================================================
   VOILE DE CONNEXION - le sceau
   Une nappe d'encre part du geste de connexion et couvre l'écran ; le
   sceau 夢 est apposé (même famille que les sceaux de badge), un filet se
   trace sous lui, le salut et les vraies étapes de chargement montent en
   dessous. Quand tout est prêt, le filet s'allume en sakura et les deux
   battants s'écartent le long de lui sur Ma Liste.
   Phases posées par showBootScreen() / hideBootScreen() :
   is-on (entrée) → is-in (nappe finie) → is-ready (filet allumé) → is-off (ouverture).
============================================================ */
/* Rayon de la nappe : propriété enregistrée pour que le masque s'anime.
   Sans @property (navigateurs anciens), le voile apparaît d'un coup. */
@property --boot-r { syntax: '<length>'; inherits: false; initial-value: 0px; }

.ym-boot {
  --boot-x: 50%; --boot-y: 50%;
  --seal: clamp(80px, 16vw, 104px);
  position: fixed; inset: 0; z-index: 3000;
  background: var(--ink);           /* bouche la jointure des battants tant qu'ils sont fermés */
  -webkit-mask-image: radial-gradient(circle at var(--boot-x) var(--boot-y), #000 calc(var(--boot-r) - 56px), transparent var(--boot-r));
          mask-image: radial-gradient(circle at var(--boot-x) var(--boot-y), #000 calc(var(--boot-r) - 56px), transparent var(--boot-r));
}
.ym-boot[hidden] { display: none; }
.ym-boot.is-on { animation: ymBootInk .6s cubic-bezier(.5,0,.25,1) forwards; }
.ym-boot.is-in { -webkit-mask-image: none; mask-image: none; animation: none; }
.ym-boot.is-off { background: transparent; pointer-events: none; }
@keyframes ymBootInk { from { --boot-r: 0px; } to { --boot-r: calc(150vmax + 56px); } }

/* Battants : chacun porte sa moitié de la composition et son grain. */
.ym-boot__leaf {
  position: absolute; left: 0; right: 0; height: 50%;
  display: flex; flex-direction: column; align-items: center;
  padding-inline: var(--gutter);
  background: var(--ink);
  overflow: hidden;
}
.ym-boot__leaf::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ym-boot__leaf.is-top    { top: 0;    justify-content: flex-end;   padding-bottom: clamp(24px, 4.4vh, 42px); }
.ym-boot__leaf.is-bottom { bottom: 0; justify-content: flex-start; padding-top: clamp(22px, 4vh, 38px); }
.ym-boot.is-off .ym-boot__leaf { transition: transform .62s cubic-bezier(.62,0,.18,1), box-shadow .62s ease; }
.ym-boot.is-off .ym-boot__leaf.is-top    { transform: translateY(-101%); box-shadow: 0 26px 60px -24px rgba(0,0,0,.85); }
.ym-boot.is-off .ym-boot__leaf.is-bottom { transform: translateY(101%);  box-shadow: 0 -26px 60px -24px rgba(0,0,0,.85); }

/* Le sceau : double cadre sakura sur voile sakura, estampé à −4°, encre
   irrégulière (masque de bruit) comme un vrai cachet. */
.ym-boot__seal { position: relative; width: var(--seal); height: var(--seal); flex-shrink: 0; }
.ym-boot__stamp, .ym-boot__ring { position: absolute; inset: 0; border-radius: calc(var(--seal) * .18); }
.ym-boot__stamp {
  display: grid; place-items: center;
  color: var(--sakura);
  background-color: rgba(232,84,122,.08);
  border: 2px solid rgba(232,84,122,.9);
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(232,84,122,.32);
  transform: rotate(-4deg);
  opacity: 0;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='i'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -7 5.6'/></filter><rect width='100%25' height='100%25' filter='url(%23i)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='i'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -7 5.6'/></filter><rect width='100%25' height='100%25' filter='url(%23i)'/></svg>");
}
.ym-boot__kanji { font: 600 calc(var(--seal) * .5)/1 var(--font-jp); transform: translateY(-.04em); }
.ym-boot__ring { border: 1px solid var(--sakura); opacity: 0; transform: rotate(-4deg); }
.ym-boot.is-on .ym-boot__stamp { animation: ymBootStamp .54s .18s forwards; }
.ym-boot.is-on .ym-boot__ring  { animation: ymBootRing .8s cubic-bezier(.16,1,.3,1) .5s forwards; }
/* Descente accélérée, impact un peu écrasé et plus chargé en encre, puis repos. */
/* Transform, opacité et flou seulement : l'animation reste sur le compositeur
   et ne saccade pas pendant que onLogin() remplit l'app dessous. La charge
   d'encre de l'impact est un calque à part (::after). */
@keyframes ymBootStamp {
  0%   { opacity: 0; transform: translateY(-10px) scale(1.6) rotate(-14deg); filter: blur(8px); animation-timing-function: cubic-bezier(.55,0,.85,.35); }
  60%  { opacity: 1; transform: scale(.94) rotate(-4deg); filter: blur(0); animation-timing-function: cubic-bezier(.2,.9,.3,1); }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); filter: blur(0); }
}
.ym-boot__stamp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(232,84,122,.16); opacity: 0; }
.ym-boot.is-on .ym-boot__stamp::after { animation: ymBootPress .54s .18s forwards; }
@keyframes ymBootPress { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ymBootRing { from { opacity: .55; transform: rotate(-4deg) scale(1); } to { opacity: 0; transform: rotate(-4deg) scale(1.9); } }

/* Le filet : tracé depuis le sceau vers les bords, puis allumé en sakura
   depuis le centre quand tout est chargé - c'est le long de lui que les
   battants s'ouvrent. */
.ym-boot__rule {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2) 14%, var(--border-2) 86%, transparent);
  transform: scaleX(0);
  pointer-events: none;
}
.ym-boot__rule::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--sakura) 20%, var(--sakura-2) 50%, var(--sakura) 80%, transparent);
  transform: scaleX(0);
  transition: transform .36s cubic-bezier(.16,1,.3,1);
}
.ym-boot.is-on .ym-boot__rule { animation: ymBootRule .62s cubic-bezier(.16,1,.3,1) .47s forwards; }
.ym-boot.is-ready .ym-boot__rule::after { transform: scaleX(1); }
/* Le filet reste allumé le temps que la jointure s'ouvre vraiment. */
.ym-boot.is-off .ym-boot__rule { opacity: 0; transition: opacity .22s ease .14s; }
@keyframes ymBootRule { to { transform: scaleX(1); } }
/* Lueur qui filtre par la jointure juste avant l'ouverture. */
.ym-boot__glow {
  position: absolute; left: 0; right: 0; top: 50%; height: 120px; margin-top: -60px;
  background: radial-gradient(45% 50% at 50% 50%, rgba(232,84,122,.2), rgba(232,84,122,0));
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.ym-boot.is-ready .ym-boot__glow { opacity: 1; }
.ym-boot.is-off .ym-boot__glow { opacity: 0; transition: opacity .3s ease .08s; }

/* Le salut monte de sous le filet. */
.ym-boot__hello {
  max-width: min(720px, 100%); padding-bottom: .12em; overflow: hidden;
  font: 500 clamp(26px, 4.2vw, 40px)/1.18 var(--font-jp); letter-spacing: -.015em;
  color: var(--text); text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.ym-boot__hello-in { display: block; transform: translateY(105%); }
.ym-boot__hello em { font-style: normal; color: var(--sakura); }
.ym-boot.is-on .ym-boot__hello-in { animation: ymBootRise .72s cubic-bezier(.16,1,.3,1) .6s forwards; }
@keyframes ymBootRise { to { transform: none; } }

/* Étapes réelles : une ligne à filet par donnée chargée, cochée quand
   elle arrive vraiment (bootStepDone), avec sa valeur. */
.ym-boot__steps { list-style: none; width: min(320px, 100%); margin-top: clamp(18px, 3vh, 28px); }
.ym-boot__step {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 0;
  opacity: 0; transform: translateY(8px);
}
.ym-boot__step + .ym-boot__step { border-top: 1px solid var(--border); }
.ym-boot.is-on .ym-boot__step { animation: ymBootStep .46s cubic-bezier(.16,1,.3,1) .8s forwards; }
.ym-boot.is-on .ym-boot__step:nth-child(2) { animation-delay: .88s; }
@keyframes ymBootStep { to { opacity: 1; transform: none; } }
.ym-boot__tick {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-2); color: var(--sakura);
  transition: border-color .3s ease, background-color .3s ease;
}
.ym-boot__tick::before, .ym-boot__tick svg { grid-area: 1 / 1; }
.ym-boot__tick::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sakura);
  animation: ymBootPulse .9s ease-in-out infinite alternate;
}
.ym-boot__tick svg { width: 12px; height: 12px; }
.ym-boot__tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ym-boot__step.is-done .ym-boot__tick { border-color: var(--sakura-line); background-color: var(--sakura-soft); }
.ym-boot__step.is-done .ym-boot__tick::before { animation: none; opacity: 0; transform: scale(0); transition: opacity .2s ease, transform .2s ease; }
.ym-boot__step.is-done .ym-boot__tick path { stroke-dashoffset: 0; transition: stroke-dashoffset .34s cubic-bezier(.65,0,.35,1) .06s; }
@keyframes ymBootPulse { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
/* Donnée injoignable : pas de coche inventée - un tiret et « indisponible ». */
.ym-boot__step.is-failed .ym-boot__tick::before { animation: none; width: 8px; height: 1.5px; border-radius: 1px; background: var(--text-3); opacity: 1; transform: none; }
.ym-boot__step.is-failed .ym-boot__value { opacity: 1; transform: none; color: var(--text-3); }
.ym-boot__label { font: 500 13px/1.3 var(--font-body); color: var(--text-2); transition: color .3s ease; }
.ym-boot__step.is-done .ym-boot__label { color: var(--text); }
.ym-boot__value {
  font: 400 12.5px/1.3 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.ym-boot__step.is-done .ym-boot__value { opacity: 1; transform: none; }

/* L'app derrière le voile attend un cran en retrait et s'avance pendant
   l'ouverture des battants. */
body.ym-booting :is(.ym-today, .filters-bar, .main) { opacity: .4; transform: translateY(14px) scale(.992); transform-origin: 50% 0; }
body.ym-boot-reveal :is(.ym-today, .filters-bar, .main) { transition: opacity .6s ease .1s, transform .9s cubic-bezier(.16,1,.3,1) .05s; }

/* Mouvement réduit : plus de nappe, de chute ni d'ouverture - des fondus.
   Les coches restent, puisqu'elles disent ce qui est chargé. */
@media (prefers-reduced-motion: reduce) {
  .ym-boot { -webkit-mask-image: none; mask-image: none; opacity: 0; transition: opacity .25s ease; }
  .ym-boot.is-on { animation: none; opacity: 1; }
  .ym-boot.is-off { opacity: 0; transition-duration: .32s; }
  .ym-boot.is-off .ym-boot__leaf { transform: none; box-shadow: none; }
  .ym-boot__ring, .ym-boot__stamp::after { display: none; }
  .ym-boot__rule, .ym-boot__hello-in, .ym-boot__step { transform: none; }
  .ym-boot.is-on :is(.ym-boot__stamp, .ym-boot__rule, .ym-boot__hello-in, .ym-boot__step) {
    animation: ymBootFade .4s ease .05s both;
  }
  .ym-boot.is-on .ym-boot__hello-in { animation-delay: .12s; }
  .ym-boot.is-on .ym-boot__step { animation-delay: .2s; }
  .ym-boot.is-on .ym-boot__step:nth-child(2) { animation-delay: .26s; }
  .ym-boot__rule::after { transform: none; opacity: 0; transition: opacity .3s ease; }
  .ym-boot.is-ready .ym-boot__rule::after { opacity: 1; }
  .ym-boot__tick::before { animation: none; opacity: .6; }
  body.ym-booting :is(.ym-today, .filters-bar, .main) { transform: none; }
}
@keyframes ymBootFade { from { opacity: 0; } to { opacity: 1; } }

/* Rangée qui défile horizontalement : le fondu n'apparaît que du côté où il
   reste du contenu (classes posées par attachScrollFade()). */
.ym-hscroll {
  --hs-fade-l: 0%; --hs-fade-r: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hs-fade-l), #000 var(--hs-fade-r), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--hs-fade-l), #000 var(--hs-fade-r), transparent 100%);
}
.ym-hscroll.can-prev { --hs-fade-l: 5%; }
.ym-hscroll.can-next { --hs-fade-r: 95%; }
.ym-today__list::-webkit-scrollbar { display: none; }
.ym-today__list > .ym-loading-row { padding: 12px 0; justify-content: flex-start; }
.ym-today-card {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  min-width: 232px; padding: 6px 16px 6px 6px;
  border: 1px solid var(--border); border-radius: var(--r-ctrl);
  background: transparent;
  transition: border-color .2s ease, background .2s ease, transform .3s var(--ease);
}
.ym-today-card[onclick] { cursor: pointer; }
.ym-today-card:hover { border-color: var(--border-2); background: var(--ink-2); transform: translateY(-2px); }
.ym-today-poster, .ym-today-fallback { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ink-3); }
.ym-today-fallback { display: flex; align-items: center; justify-content: center; font: 500 15px var(--font-jp); color: var(--text-3); }
.ym-today-title { font: 500 12.5px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ym-today-meta { font: 400 11px var(--font-body); color: var(--sakura); margin-top: 2px; }
.ym-today__empty { font: 400 13px var(--font-body); color: var(--text-3); padding: 12px 0; }

/* ============================================================
   4. MA LISTE - rail + surface
============================================================ */
.filters-bar { display: none; }

.main {
  width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0 56px;
  min-width: 0;
}
.main > * { min-width: 0; }

/* - Rail - */
.sidebar {
  position: sticky; top: 72px; align-self: start;
  max-height: calc(100vh - 72px); overflow-y: auto;
  padding: 44px 0 40px; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-section { margin-bottom: 36px; }
.sidebar-title {
  font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 14px;
}

.user-card { display: flex; flex-direction: column; align-items: flex-start; }
.user-avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-3); border: 1px solid var(--border-2);
  font-size: 30px; margin-bottom: 18px;
}
.user-avatar img, .user-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-name { font: 500 24px/1.15 var(--font-jp); color: var(--text); letter-spacing: -.01em; }
#sideUserTag {
  display: inline-flex; align-items: center; margin: 8px 0 6px;
  font: 500 11.5px/1 var(--font-body); letter-spacing: .04em; color: var(--sakura);
  cursor: pointer;
}
#sideUserTag:empty { display: none; }
.user-role { font: 400 12.5px var(--font-body); color: var(--text-2); }
.user-divider { width: 100%; height: 1px; background: var(--border); margin: 22px 0 6px; }
.user-stat-row {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.user-stat-row:last-of-type { border-bottom: none; }
.user-stat-lbl { font: 400 12.5px var(--font-body); color: var(--text-2); }
.user-stat-val { font: 600 14px var(--font-body); color: var(--text); letter-spacing: -.01em; }

.list-nav { display: flex; flex-direction: column; }
.list-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: color .2s ease;
}
.list-nav-item:last-of-type { border-bottom: none; }
.list-nav-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.list-nav-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: transform .3s var(--ease), box-shadow .3s ease; }
.list-nav-lbl { font: 500 13.5px var(--font-body); color: var(--text-2); transition: color .2s ease; }
.list-nav-count { font: 500 12px var(--font-body); color: var(--text-3); }
.list-nav-item:hover .list-nav-lbl { color: var(--text); }
.list-nav-item.active .list-nav-lbl { color: var(--text); }
.list-nav-item.active .list-nav-count { color: var(--sakura); }
.list-nav-item.active .list-nav-dot { box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--border-2); }

.save-slots-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: transparent;
  font: 500 13px var(--font-body); color: var(--text-2); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.save-slots-btn:hover { color: var(--text); border-color: var(--text-3); background: var(--glass); }
.sidebar-jp { margin-top: 36px; font: 300 12px/1.9 var(--font-jp); color: var(--text-3); letter-spacing: .02em; }

/* - Surface - */
.content { min-width: 0; padding-bottom: 40px; }

/* - Grille d'affiches (vue cartes) - */
.anime-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 18px; }
.anime-gcard {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 2/3; border-radius: var(--r-lg);
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--border);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.anime-gcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--border-2), var(--shadow-hover); }
/* Téléphone et tablette : une carte hors de l'écran n'est ni mise en page ni
   dessinée (taille gardée par aspect-ratio). Mesuré sur une liste de 300
   animes : défilement sans blocage, sans les calques permanents de will-change. */
@media (max-width: 1299px), (hover: none) {
  .anime-gcard { content-visibility: auto; }
  /* Idem pour les billets de Reprendre hors de la rangée visible : passer
     sur Ma Liste coûtait 0,2 s avec 38 séries en cours, 0,12 s ainsi */
  #resumeRail .ym-resume__card { content-visibility: auto; contain-intrinsic-size: auto 312px auto 100px; }
}
.anime-gcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.anime-gcard:hover .anime-gcard-img { transform: scale(1.05); }
.anime-gcard canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anime-gcard-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-ctrl);
  background: rgba(8,8,12,.78); color: var(--poster-muted); /* regle-ok : sur l'affiche, sombre dans les deux thèmes */
}
.anime-gcard-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* !important : les règles .badge-* de la vue en lignes (plus bas) le portent aussi */
.anime-gcard-badge.badge-watching  { color: var(--poster-sakura) !important; }
.anime-gcard-badge.badge-completed { color: var(--poster-green) !important; }
.anime-gcard-badge.badge-plan      { color: var(--poster-muted) !important; }
.anime-gcard-badge.badge-hold      { color: var(--poster-gold) !important; }
.anime-gcard-badge.badge-dropped   { color: var(--poster-red) !important; }
.anime-gcard-actions { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.anime-gcard-fav, .anime-gcard-gear {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(8,8,12,.62); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .3s var(--ease);
}
.anime-gcard-fav:hover, .anime-gcard-gear:hover { background: rgba(8,8,12,.9); color: var(--text); transform: scale(1.06); }
.anime-gcard-fav.active { color: var(--gold); }
.anime-gcard-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 44px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(6,6,9,.7) 40%, rgba(6,6,9,.97));
}
.anime-gcard-title {
  font: 600 13.5px/1.3 var(--font-body); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 6px;
}
.anime-gcard-row { display: flex; align-items: center; justify-content: space-between; font: 500 11.5px var(--font-body); color: var(--text-2); margin-bottom: 8px; }
.anime-gcard-score { color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.anime-gcard-progress { height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; }
.anime-gcard-progress > div { height: 100%; background: var(--sakura); transition: width .45s var(--ease); }

/* - Vue liste : lignes séparées par des filets, pas des cartes - */
.anime-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.anime-list:has(.empty-state) { border-top: none; }
/* Liste encore vide : trois portes d'entrée plutôt qu'un simple constat */
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
@media (max-width: 560px) { .empty-actions .btn { width: 100%; } }
.anime-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 64px 34px 34px; align-items: center; column-gap: 16px;
  padding: 12px 6px; border-bottom: 1px solid var(--border);
  cursor: pointer; min-width: 0;
  transition: background .2s ease;
  animation: ymRowIn .4s var(--ease-out) both;
}
@keyframes ymRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.anime-card:hover { background: var(--glass); }
/* Chaque élément a sa colonne sur une seule rangée, pour que les colonnes
   restent alignées d'une ligne à l'autre. La rangée « Reprendre » se charge
   du +1, la vue liste n'a donc plus de boutons d'action rapide. */
.anime-card > * { grid-row: 1; }
.anime-card > .anime-poster { grid-column: 1; }
.anime-card > .anime-info { grid-column: 2; }
.anime-card > .anime-progress { grid-column: 3; }
.anime-card > .anime-score { grid-column: 4; }
.anime-card > .anime-fav { grid-column: 5; }
.anime-card > .anime-gear { grid-column: 6; }
.anime-poster {
  position: relative; isolation: isolate;
  width: 44px; height: 62px; border-radius: var(--r-xs); overflow: hidden;
  background: var(--ink-3); flex-shrink: 0;
}
.anime-poster img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.anime-info { min-width: 0; }
.anime-title { font: 500 14.5px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.anime-subtitle { font: 400 11.5px var(--font-body); color: var(--text-3); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.anime-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--r-ctrl); border: 1px solid var(--border);
  color: var(--text-2); white-space: nowrap;
}
.anime-status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.anime-subtitle .anime-status-badge { padding: 0; border: 0; font-size: 10.5px; }
.badge-watching  { color: var(--sakura) !important; }
.badge-completed { color: var(--green) !important; }
.badge-plan      { color: var(--text-2) !important; }
.badge-hold      { color: var(--gold) !important; }
.badge-dropped   { color: var(--red-text) !important; }
.anime-progress { font: 500 12px var(--font-body); color: var(--text-2); text-align: right; min-width: 74px; }
.progress-bar { height: 2px; background: var(--ink-4); border-radius: 1px; margin-top: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--sakura); transition: width .45s var(--ease); }
/* Petit sursaut du compteur quand un épisode vient d'être ajouté. */
.is-bumped { animation: ymBump .4s var(--ease); }
@keyframes ymBump { 0% { transform: none; } 35% { transform: translateY(-2px) scale(1.06); color: var(--sakura); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .is-bumped { animation: none; }
  .progress-fill, .anime-gcard-progress > div { transition: none; }
}
.anime-score { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--font-body); color: var(--gold); min-width: 46px; justify-content: flex-end; }
.anime-score .star { display: none; }
.anime-fav {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: pointer; transition: color .2s ease, background .2s ease;
}
.anime-fav:hover { color: var(--text); background: var(--glass-2); }
.anime-fav.active { color: var(--gold); }
.anime-gear {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: pointer; transition: color .2s ease, background .2s ease;
}
.anime-gear:hover { color: var(--text); background: var(--glass-2); }
/* ============================================================
   5. DÉCOUVRIR - avis & listes de la communauté en grille à filets
============================================================ */
.discover-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: clamp(44px, 6vw, 72px) 0 28px; }
.discover-header:first-child { margin-top: 0; }
.discover-title { font: 400 var(--fs-titre-section)/1.2 var(--font-titre); color: var(--text); letter-spacing: 0; }
.discover-sub { margin-top: 10px; font: 400 13.5px/1.6 var(--font-body); color: var(--text-2); }
.discover-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ym-more { display: flex; justify-content: center; margin-top: 28px; }
.ym-more .btn { display: inline-flex; }

.shared-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.shared-grid > .shared-card { background: var(--ink); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }

.shared-card {
  display: flex; flex-direction: column; min-width: 0;
  cursor: pointer; transition: background .3s ease, border-color .3s ease;
}
.shared-card:hover { background: var(--ink-2); border-color: var(--border-2); }
.shared-card-covers { display: grid; grid-template-columns: repeat(4, 1fr); height: 120px; overflow: hidden; }
.shared-card-cover { width: 100%; height: 120px; object-fit: cover; background: var(--ink-3); transition: transform .7s var(--ease); }
.shared-card:hover .shared-card-cover { transform: scale(1.04); }
.shared-card-cover-placeholder { width: 100%; height: 120px; background: var(--ink-3); display: flex; align-items: center; justify-content: center; font: 400 18px var(--font-jp); color: var(--text-3); }
/* Bannière de 1 à 3 affiches (4 = la grille ci-dessus) : à leur vraie
   proportion, centrées sur le fond flouté de la première. Étirées sur toute
   la largeur, elles étaient agrandies (floues : une affiche MAL fait ~225 px
   de large) et coupées en bandeau. Posé sur une affiche : sombre partout. */
.shared-card-covers { position: relative; }
.shared-card-covers--1, .shared-card-covers--2, .shared-card-covers--3 {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; background: var(--ink-3);
}
.shared-card-covers--1 .shared-card-cover,
.shared-card-covers--2 .shared-card-cover,
.shared-card-covers--3 .shared-card-cover {
  position: relative; flex: 0 1 auto; min-width: 0;
  width: auto; height: 100%; aspect-ratio: 2 / 3;
  border-radius: 4px; box-shadow: var(--shadow-2);
}
.shared-card-fond {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(16px) brightness(.5) saturate(1.2); transform: scale(1.2);
  pointer-events: none;
}

/* Choix de la bannière avant publication (#bannerModal, ouvrirChoixBanniere) */
.bn-intro { font: 400 13.5px/1.6 var(--font-body); color: var(--text-2); margin: 0 0 14px; }
.bn-apercu { border-radius: var(--r-xs); margin-bottom: 16px; }
.bn-recherche { margin-bottom: 12px; }
.bn-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px;
  max-height: 42vh; overflow-y: auto; padding: 4px 2px;
}
.bn-tuile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 11.5px/1.35 var(--font-body); color: var(--text-2);
}
.bn-tuile__affiche {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r-xs);
  overflow: hidden; background: var(--ink-3);
  outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s ease;
}
.bn-tuile__affiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-tuile:hover .bn-tuile__affiche { outline-color: var(--sakura-line); }
.bn-tuile.is-choisi .bn-tuile__affiche,
.bn-tuile:focus-visible .bn-tuile__affiche { outline-color: var(--sakura); }
.bn-tuile.is-choisi { color: var(--text); }
/* Posé sur l'affiche : même rendu dans les deux thèmes */
.bn-tuile__rang {
  position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--sakura-deep); color: var(--white);
  font: 600 12px/22px var(--font-body); text-align: center;
}
.bn-tuile__titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shared-card-body { padding: 22px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.shared-card-title { font: 500 18px/1.3 var(--font-jp); color: var(--text); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shared-card-meta { font: 400 12px var(--font-body); color: var(--text-3); margin-bottom: 12px; }
.shared-card-desc { font: 400 13.5px/1.65 var(--font-body); color: var(--text-2); margin-bottom: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shared-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.shared-card-author { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font-body); color: var(--text-2); min-width: 0; transition: color .2s ease; }
.shared-card-author:hover { color: var(--text); }
.shared-card-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: var(--ink-3); display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-body); color: var(--text-2); flex-shrink: 0; }
.shared-card-avatar img, .shared-card-avatar svg { width: 100%; height: 100%; object-fit: cover; }
.shared-card-likes {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: transparent;
  font: 500 12px var(--font-body); color: var(--text-2); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.shared-card-likes svg { width: 13px; height: 13px; }
.shared-card-likes:hover { color: var(--sakura); border-color: var(--sakura-line); }
.shared-card-likes.liked { color: var(--sakura); border-color: var(--sakura-line); background: var(--sakura-soft); }

/* Carte avis : l'avis est une citation, l'affiche l'accompagne */
.ym-review { padding: 24px 24px 20px; }
.ym-review__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.ym-review__poster { width: 48px; height: 68px; border-radius: var(--r-xs); object-fit: cover; flex-shrink: 0; background: var(--ink-3); }
.ym-review__anime { min-width: 0; }
.ym-review__anime .shared-card-title { margin-bottom: 4px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 17px; }
.ym-review__score { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--font-body); color: var(--gold); }
.ym-review__score .ym-review__date { font-weight: 400; color: var(--text-3); margin-left: 2px; }
.ym-review__score svg { width: 12px; height: 12px; }
.ym-review__text {
  font: 400 14px/1.7 var(--font-body); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 18px;
}
.ym-review__text::before { content: '« '; color: var(--text-3); }
.ym-review__text::after { content: ' »'; color: var(--text-3); }
.ym-review__acts { display: flex; align-items: center; gap: 12px; }
.ym-review__like { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font-body); color: var(--text-3); cursor: pointer; transition: color .2s ease; }
.ym-review__like svg { width: 14px; height: 14px; }
.ym-review__like:hover, .ym-review__like.is-on { color: var(--sakura); }
.ym-review__del { display: inline-flex; align-items: center; color: var(--text-3); cursor: pointer; transition: color .2s ease; }
.ym-review__del svg { width: 14px; height: 14px; }
.ym-review__del:hover { color: var(--red); }
.ym-review__date { font: 400 12px var(--font-body); color: var(--text-3); white-space: nowrap; }
.ym-review .shared-card-author { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============================================================
   6. NEWS - la une + mosaïque magazine
============================================================ */
.news-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0;
  background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 20px; text-decoration: none; color: inherit;
  transition: border-color .3s ease;
}
.news-hero:hover { border-color: var(--border-2); }
.news-hero-image { min-height: 380px; background-size: cover; background-position: center; background-color: var(--ink-3); position: relative; transition: transform .8s var(--ease); }
/* Fondu vers la carte elle-même, quel que soit le thème */
.news-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, color-mix(in srgb, var(--ink-2) 60%, transparent) 100%); }
.news-hero-body { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; }
.news-badge {
  display: inline-flex; align-items: center; width: fit-content;
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 11px; border-radius: var(--r-ctrl);
  background: var(--sakura-soft); border: 1px solid var(--sakura-line); color: var(--sakura);
}
.news-hero-title { font: 500 clamp(24px, 2.6vw, 34px)/1.25 var(--font-jp); color: var(--text); letter-spacing: -.01em; text-wrap: balance; }
.news-hero-excerpt { font: 400 14.5px/1.7 var(--font-body); color: var(--text-2); text-wrap: pretty; }
.news-hero-meta { font: 400 12px var(--font-body); color: var(--text-3); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.news-hero-cat { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sakura); }

.news-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 112px; grid-auto-flow: dense; gap: 14px; }
.news-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-3);
  box-shadow: 0 0 0 1px var(--border); text-decoration: none; color: inherit; display: block;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.news-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--border-2), var(--shadow-hover); }
.news-card-lg   { grid-column: span 2; grid-row: span 3; }
.news-card-wide { grid-column: span 2; grid-row: span 2; }
.news-card-tall { grid-column: span 1; grid-row: span 3; }
.news-card-sm   { grid-column: span 1; grid-row: span 2; }
.news-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--ink-3); transition: transform .8s var(--ease); }
.news-card:hover .news-card-bg { transform: scale(1.05); }
.news-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,8,12,.94) 100%); }
/* Sans image, la carte garde l'encre de nuit : son texte est blanc dans les deux thèmes */
.news-card-noimg .news-card-scrim { background: linear-gradient(160deg, #1a1a26, #22223a); } /* regle-ok : carte sombre partout, comme celles à image */
.news-card-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; gap: 6px; }
.news-card-title { font: 500 15px/1.35 var(--font-jp); color: #fff; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-lg .news-card-title { font-size: 19px; }
.news-card-sm .news-card-title, .news-card-tall .news-card-title { font-size: 13px; }
.news-card-meta { font: 400 11px var(--font-body); color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 6px; }
.news-card .news-badge { position: absolute; top: 12px; left: 12px; background: rgba(10,10,15,.7); border-color: rgba(255,255,255,.18); color: var(--white); } /* regle-ok : sur l'image, sombre dans les deux thèmes ; --text y deviendrait de l'encre */

/* ============================================================
   7. EXPLORER & CALENDRIER - grilles d'affiches
============================================================ */
.season-nav { display: flex; align-items: center; gap: 8px; }
.season-label { font: 500 16px var(--font-jp); color: var(--text); min-width: 150px; text-align: center; }
.season-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }

/* Cloche et pseudo restent dans la barre sous 1300px (placerNavCompte dans
   index.html les y déplace) : dans la feuille du menu, ces deux repères
   permanents se perdaient au milieu des liens de sections. Le point rose
   qui prévenait sur le bouton du menu n'a plus lieu d'être, la cloche et
   son compteur étant visibles. */
.nav-inline { display: none; }
/* Au bureau, « Déconnexion » en icône seule pour laisser la place à la cloche
   (la barre complète tenait à 24px près à 1300px) */
@media (min-width: 1300px) {
  #navRight .ym-logout { width: 34px; padding: 0 !important; justify-content: center; }
  #navRight .ym-logout span { display: none; }
}
/* « Installer l'application » : une ligne du menu, comme l'interrupteur de
   thème juste au-dessus ; jamais au bureau. */
.nav-installer { display: none; }
@media (max-width: 1299px) {
  .nav-sheet > .nav-installer:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between;
    height: 44px; padding: 0 14px; margin: -8px var(--gutter) 18px;
    border: 1px solid var(--border-2); border-radius: var(--r);
    background: none; color: var(--text); cursor: pointer; font: 500 13.5px var(--font-body);
  }
  .nav-installer .ico { width: 18px; height: 18px; color: var(--sakura); }
  .nav-installer:hover { border-color: var(--sakura-line); }
  .nav-installer:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; }
}

@media (max-width: 1299px) {
  /* :not(:empty) : sans compte connecté, la boîte reste vide et c'est le
     bouton du menu qui garde la marge automatique (sinon les deux la
     partageraient et le bouton quitterait le bord). */
  .nav-inline:not(:empty) {
    display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0;
  }
  .nav-inline:not(:empty) + .nav-burger { margin-left: 0; }
  /* inline-block (et non inline-flex) pour que le pseudo trop long se coupe
     avec des points de suspension ; la marge remplace le gap perdu. */
  .nav-inline .af-pill {
    display: inline-block; max-width: min(42vw, 230px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-inline .af-pill span { margin-left: 6px; }
}
@media (max-width: 560px) {
  .nav-inline:not(:empty) { gap: 6px; }
  .nav-inline .af-pill { max-width: 38vw; padding: 6px 10px; }
}

/* Fil d'activité des amis, en tête de Communauté : lignes séparées par des
   filets, deux colonnes au bureau. */
.ym-friends[hidden], #friendsFeedAll[hidden] { display: none; }
.ym-friends__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.ym-friends__item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 8px; margin: 0 -8px; border-bottom: 1px solid var(--border); border-radius: var(--r-xs);
  transition: background .2s var(--ease);
}
.ym-friends__item.is-link { cursor: pointer; }
.ym-friends__item.is-link:hover { background: var(--glass); }
.ym-friends__avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--ink-3);
  font: 500 14px var(--font-jp); color: var(--text-2);
}
.ym-friends__avatar img, .ym-friends__avatar svg { width: 100%; height: 100%; object-fit: cover; }
.ym-friends__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ym-friends__text { font: 400 13.5px/1.45 var(--font-body); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ym-friends__text strong { color: var(--text); font-weight: 600; }
.ym-friends__who { color: var(--text); font-weight: 600; cursor: pointer; }
.ym-friends__who:hover { color: var(--sakura); }
.ym-friends__time { font: 400 11.5px var(--font-body); color: var(--text-3); }
.ym-friends__poster { width: 32px; aspect-ratio: 2/3; object-fit: cover; border-radius: 4px; background: var(--ink-3); }
.ym-friends__empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 0 4px; }
.ym-friends__empty p { margin: 0; font: 400 13.5px/1.5 var(--font-body); color: var(--text-2); }
@media (max-width: 760px) { .ym-friends__list { grid-template-columns: 1fr; } }

/* Visiteur sans compte (state.guestBrowsing) : la barre n'affiche que les
   sections consultables, dans l'ordre de la landing. Ma Liste, Surprise et
   Nous contacter ne sont pas proposés plutôt que de mener à une connexion. */
/* Bandeau « visite sans compte » sous la barre */
.ym-guestbar { display: none; border-bottom: 1px solid var(--sakura-line); background: var(--sakura-soft); }
body.is-guest-browsing .ym-guestbar { display: block; }
/* Le bandeau porte déjà « Créer un compte » / « J'ai déjà un compte » : les
   boutons Connexion / S'inscrire de la barre feraient doublon. */
/* Au bureau, la place reste réservée (visibility) pour que les liens restent
   centrés ; dans la feuille du menu (< 1300px), elle disparaît tout à fait. */
body.is-guest-browsing #navRight { visibility: hidden; pointer-events: none; }
@media (max-width: 1299px) { body.is-guest-browsing #navRight { display: none; } }
.ym-guestbar__inner { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.ym-guestbar__ico { width: 18px; height: 18px; color: var(--sakura); flex-shrink: 0; }
.ym-guestbar__text { flex: 1; min-width: 0; margin: 0; font: 400 13px/1.55 var(--font-body); color: var(--text-2); }
.ym-guestbar__text strong { color: var(--text); font-weight: 600; }
.ym-guestbar__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ym-guestbar__link {
  position: relative; background: none; border: none; padding: 0; cursor: pointer;
  font: 500 12.5px var(--font-body); color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--sakura-line);
}
.ym-guestbar__link:hover { color: var(--sakura); }
/* Zone de clic portée à 25px de haut sans décaler la mise en page (le texte en fait 15) */
.ym-guestbar__link::after { content: ''; position: absolute; inset: -5px 0; }
@media (max-width: 760px) {
  .ym-guestbar__inner { flex-wrap: wrap; align-items: flex-start; }
  .ym-guestbar__ico { margin-top: 2px; }
  .ym-guestbar__text { flex-basis: calc(100% - 32px); }
  .ym-guestbar__actions { padding-left: 32px; }
}

body.is-guest-browsing .nav-links a[data-section="mylist"],
body.is-guest-browsing .nav-links a[data-section="surprise"],
body.is-guest-browsing .nav-links a[data-section="contact"] { display: none; }
body.is-guest-browsing .nav-links a[data-section="search"] { order: 1; }
body.is-guest-browsing .nav-links a[data-section="calendar"] { order: 2; }
body.is-guest-browsing .nav-links a[data-section="news"] { order: 3; }
body.is-guest-browsing .nav-links a[data-section="discover"] { order: 4; }

/* Planning de la semaine : une colonne par jour, séparées par des filets.
   Sous 1100px, une rangée d'onglets de jours et une seule colonne affichée. */
/* les conteneurs basculés par applyCalendarView() ont un display propre */
.cal-views[hidden], .cal-planning[hidden], .season-filters[hidden], .seasonal-grid[hidden] { display: none; }
.cal-views { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.cal-tabs { display: none; }
.cal-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.cal-day { min-width: 0; padding: 0 10px 18px; border-left: 1px solid var(--border); }
.cal-day:first-child { border-left: none; padding-left: 0; }
.cal-day:last-child { padding-right: 0; }
.cal-day.is-today { background: linear-gradient(180deg, var(--sakura-soft), transparent 240px); box-shadow: inset 0 2px 0 var(--sakura); }
.cal-day.is-today:first-child { padding-left: 10px; }
.cal-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 14px 0 12px; }
.cal-day__name { font: 500 17px var(--font-jp); color: var(--text); margin: 0; }
.cal-day.is-today .cal-day__name { color: var(--sakura); }
.cal-day__today { font: 500 11px var(--font-body); color: var(--sakura); white-space: nowrap; }
.cal-day__empty { font: 400 12.5px var(--font-body); color: var(--text-3); margin: 4px 0 0; }

.cal-item {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 9px 6px; margin: 0 -6px; border-radius: var(--r);
  transition: background .2s var(--ease);
}
.cal-item[role="link"] { cursor: pointer; }
.cal-item[role="link"]:hover, .cal-item[role="link"]:focus-visible { background: var(--glass); }
.cal-item + .cal-item { box-shadow: 0 -1px 0 var(--border); }
.cal-item__cover { position: relative; width: 42px; aspect-ratio: 2/3; border-radius: var(--r-xs); overflow: hidden; background: var(--ink-3); }
.cal-item__cover .ym-plate { position: absolute; inset: 0; font-size: 15px; }
.cal-item__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-item.in-list .cal-item__cover { box-shadow: 0 0 0 2px var(--sakura); }
.cal-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-item__time { font: 600 12px var(--font-body); color: var(--sakura); font-variant-numeric: tabular-nums; }
.cal-item__title {
  font: 500 12.5px/1.35 var(--font-body); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-item__meta { font: 400 11px var(--font-body); color: var(--text-3); }
.cal-item.is-aired .cal-item__cover, .cal-item.is-aired .cal-item__title { opacity: .55; }
.cal-item.is-aired .cal-item__time { color: var(--text-3); }
/* Créneau de la semaine sans épisode (sortiesSemaine : reporteAu) */
.cal-item.is-reporte .cal-item__cover, .cal-item.is-reporte .cal-item__title { opacity: .55; }
.cal-item.is-reporte .cal-item__time { color: var(--text-3); text-decoration: line-through; }
.cal-item.is-reporte .cal-item__meta { color: var(--text-2); }
.cal-note { font: 400 12px/1.6 var(--font-body); color: var(--text-3); margin: 18px 0 0; }

@media (max-width: 1099px) {
  .cal-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 14px; }
  .cal-tabs::-webkit-scrollbar { display: none; }
  .cal-tab {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: var(--r-ctrl); border: 1px solid var(--border-2);
    background: transparent; color: var(--text-2); font: 500 13px var(--font-body); cursor: pointer;
  }
  .cal-tab__count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .cal-tab.is-today { border-color: var(--sakura-line); }
  .cal-tab.active { background: var(--sakura-soft); border-color: var(--sakura-line); color: var(--sakura); }
  .cal-tab.active .cal-tab__count { color: var(--sakura); }
  :root[data-theme="light"] .cal-tab.active,
  :root[data-theme="light"] .cal-tab.active .cal-tab__count { color: var(--sakura-2); }
  .cal-board { display: block; }
  .cal-day { display: none; border-left: none; padding: 0; }
  .cal-day.is-active { display: block; }
  .cal-day.is-today { background: none; box-shadow: none; }
  .cal-day.is-today:first-child { padding-left: 0; }
  .cal-item { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 11px 6px; }
  .cal-item__cover { width: 48px; }
  .cal-item__title { font-size: 14px; }
  .cal-item__time { font-size: 13px; }
  .cal-item__meta { font-size: 12px; }
}

.seasonal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 16px; }
.seasonal-card { display: flex; flex-direction: column; background: transparent; border: none; min-width: 0; }
.seasonal-poster-wrap {
  position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--r-lg);
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--border);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.seasonal-card:hover .seasonal-poster-wrap { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--border-2), var(--shadow-hover); }
.seasonal-card.in-list .seasonal-poster-wrap { box-shadow: 0 0 0 1px rgba(82,196,140,.45); }
.seasonal-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.seasonal-card:hover .seasonal-poster { transform: scale(1.05); }
.seasonal-poster-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.seasonal-status {
  position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-ctrl); background: rgba(8,8,12,.78);
}
.seasonal-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-airing   { color: var(--green); }
.status-finished { color: var(--blue); }
.status-upcoming { color: var(--gold); }
.seasonal-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 40px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(6,6,9,.7) 40%, rgba(6,6,9,.97));
}
.seasonal-title { font: 600 13px/1.3 var(--font-body); color: var(--text); margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seasonal-meta { font: 400 11px var(--font-body); color: var(--text-2); }
.seasonal-score { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px var(--font-body); color: var(--gold); margin-top: 5px; }
.seasonal-body { padding: 10px 2px 0; display: flex; flex-direction: column; flex: 1; }
.seasonal-actions { display: flex; gap: 6px; align-items: center; }
.seasonal-add-btn {
  flex: 1; height: 34px; 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; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.seasonal-add-btn:hover { color: var(--sakura); border-color: var(--sakura-line); }
.seasonal-add-btn.added { color: var(--green); border-color: rgba(82,196,140,.4); background: rgba(82,196,140,.08); }
.notif-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border-2); background: transparent; color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.notif-btn:hover { color: var(--sakura); border-color: var(--sakura-line); }
.notif-btn.active { color: var(--sakura); border-color: var(--sakura-line); background: var(--sakura-soft); animation: ymBell .5s ease; }
@keyframes ymBell { 0%,100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(8deg); } }

/* ============================================================
   8 bis. POUR TOI - la page des recommandations (ex-Surprise)
   Les cartes Surprise en tête, puis des blocs séparés par un filet :
   « Selon tes goûts » en grille, « Parce que tu as aimé X » et « La suite
   de tes séries » en rangées défilantes. Grandes affiches à voile, comme
   la grille du calendrier.
============================================================ */
.pt-page { padding-bottom: 72px; }
/* Dans la page, la Surprise devient un bloc parmi d'autres : plus de grand
   titre centré ni de marge de page entière. */
.pt-page .surprise-section { max-width: none; padding: 0 0 40px; border-bottom: 1px solid var(--border); }
.pt-page .surprise-header { margin-bottom: 26px; }
.pt-page .surprise-title { font-size: var(--fs-sub); margin-bottom: 8px; }
.pt-page .surprise-sub { font-size: 13.5px; }
.pt-page .surprise-reveal-all { margin-top: 28px; }

.pt-block { padding: 36px 0 8px; border-bottom: 1px solid var(--border); }
.pt-block:last-child { border-bottom: 0; }
.pt-block[hidden] { display: none; }
.pt-block__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pt-block__head h2 { font: 500 var(--fs-sub)/1.3 var(--font-jp); color: var(--text); letter-spacing: -.01em; }
.pt-block__head h2 a { color: var(--sakura); text-decoration: none; }
.pt-block__head h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-block__head span { font: 400 12.5px var(--font-body); color: var(--text-3); }

.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 16px; }
.pt-rail { gap: 16px; padding: 4px 0 10px; }
.pt-rail > .pt-card { flex: 0 0 168px; scroll-snap-align: start; }

.pt-card { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.pt-card.is-leaving { opacity: .4; pointer-events: none; }
.pt-card__poster {
  position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--r-lg);
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--border);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pt-card:hover .pt-card__poster { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--border-2), var(--shadow-hover); }
.pt-card__poster img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.pt-card:hover .pt-card__poster img { transform: scale(1.05); }
.pt-card__poster canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Posé sur l'affiche : reste sombre dans les deux thèmes (texte blanc). */
.pt-card__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 44px 11px 11px;
  background: linear-gradient(180deg, transparent, rgba(6,6,9,.72) 40%, rgba(6,6,9,.97));
}
.pt-card__title {
  font: 600 13px/1.3 var(--font-body); color: #fff; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-card__meta { font: 400 11px var(--font-body); color: rgba(255,255,255,.72); }
.pt-card__score { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font: 600 11.5px var(--font-body); color: #e8c77a; }
.pt-card__score .ico { width: 11px; height: 11px; }
.pt-card__dismiss {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,12,.72); color: rgba(255,255,255,.85); cursor: pointer;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.pt-card__dismiss .ico { width: 13px; height: 13px; }
.pt-card:hover .pt-card__dismiss, .pt-card__dismiss:focus-visible { opacity: 1; }
.pt-card__dismiss:hover { background: rgba(8,8,12,.92); color: #fff; }
/* Sur tactile, pas de survol : la croix est toujours là. */
@media (hover: none) { .pt-card__dismiss { opacity: 1; } }
.pt-card__why {
  margin-top: 9px; font: 400 12px/1.4 var(--font-body); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-card__add {
  margin-top: 9px; height: 32px; 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;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.pt-card__add:hover { color: var(--sakura); border-color: var(--sakura-line); }
.pt-card__add:disabled { opacity: .5; cursor: default; }
.pt-more { display: none; }
@media (max-width: 620px) {
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  /* Première ligne seulement, le reste derrière « Voir plus ». */
  .pt-grid:not(.is-open) > .pt-card:nth-child(n+3) { display: none; }
  .pt-more { display: flex; width: 100%; justify-content: center; margin-top: 18px; }
  .pt-more[hidden] { display: none; }
  .pt-rail > .pt-card { flex-basis: min(150px, 40vw); }
  .pt-block { padding-top: 28px; }
}

/* ============================================================
   8. SURPRISE - cinq cartes à retourner, tirage du jour
============================================================ */
.surprise-section { max-width: 960px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gutter) 40px; text-align: center; }
.surprise-header { margin-bottom: 40px; }
.surprise-title { font: 400 var(--fs-display)/1.08 var(--font-titre); color: var(--text); letter-spacing: 0; margin-bottom: 16px; }
.surprise-title em, .contact-hero-title em { font-style: normal; color: var(--sakura); }
.surprise-sub { font: 400 15px/1.7 var(--font-body); color: var(--text-2); }
.surprise-date { font: 400 12.5px var(--font-body); color: var(--text-3); margin-top: 6px; }
#surpriseTimer { font: 400 12.5px var(--font-body); color: var(--text-3); margin-top: 14px; }
#surpriseCountdown { color: var(--sakura); font-weight: 600; font-variant-numeric: tabular-nums; }
.surprise-cards { display: flex; gap: 16px; justify-content: center; perspective: 1400px; }
.surprise-card-wrap { width: 160px; cursor: pointer; flex-shrink: 0; }
.surprise-card { width: 160px; height: 268px; position: relative; transform-style: preserve-3d; transition: transform .9s var(--ease); border-radius: var(--r-lg); }
.surprise-card.flipped { transform: rotateY(180deg); }
.surprise-card-front, .surprise-card-back { position: absolute; inset: 0; border-radius: var(--r-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.surprise-card-front {
  background: var(--ink-2); box-shadow: 0 0 0 1px var(--border-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.surprise-card-front::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--sakura-line); border-radius: 10px; opacity: .6; }
.surprise-card-wrap:hover .surprise-card-front { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--sakura-line), var(--shadow-hover); }
.surprise-card-symbol { font: 400 44px/1 var(--font-jp); color: var(--sakura); }
.surprise-card-hint { font: 500 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.surprise-card-back { transform: rotateY(180deg); background: var(--ink-2); box-shadow: 0 0 0 1px var(--border-2); display: flex; flex-direction: column; }
.surprise-card-poster { position: relative; isolation: isolate; height: 176px; flex-shrink: 0; overflow: hidden; background: var(--ink-3); cursor: pointer; }
.surprise-card-poster img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.surprise-card-info { padding: 10px 10px 10px; flex: 1; display: flex; flex-direction: column; text-align: left; }
.surprise-card-title { font: 600 11.5px/1.3 var(--font-body); color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.surprise-card-score { font: 600 11px var(--font-body); color: var(--gold); margin-bottom: 8px; }
.surprise-card-add {
  width: 100%; height: 28px; margin-top: auto; border-radius: var(--r-ctrl);
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  font: 500 11px var(--font-body); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.surprise-card-add:hover { color: var(--sakura); border-color: var(--sakura-line); }
.surprise-card-add.added { color: var(--green); border-color: rgba(82,196,140,.4); background: rgba(82,196,140,.08); }
.surprise-reveal-all { margin: 40px auto 0; }
.surprise-guest { text-align: center; padding: 60px 20px; color: var(--text-3); }

/* ============================================================
   9. NOUS CONTACTER - formulaire + fil de tickets
============================================================ */
.contact-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.contact-hero { padding: clamp(44px, 6vw, 72px) 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 40px; max-width: 720px; }
.contact-hero-title { font: 400 var(--fs-titre-section)/1.2 var(--font-titre); color: var(--text); letter-spacing: 0; margin-bottom: 12px; }
.contact-hero-sub { font: 400 14.5px/1.7 var(--font-body); color: var(--text-2); max-width: 56ch; }
.contact-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.contact-legal a { font: 400 12.5px var(--font-body); color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.contact-legal a:hover { color: var(--sakura); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: flex-start; }
.contact-col-left, .contact-col-right { min-width: 0; }
.contact-form-card { background: var(--ink-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px; }
.contact-form-title { font: 500 var(--fs-sub)/1.3 var(--font-jp); color: var(--text); margin-bottom: 20px; }
.contact-types { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.contact-types .af-chip { cursor: pointer; }
.contact-textarea { min-height: 140px; }
.contact-char-count { font: 400 11px var(--font-body); color: var(--text-3); text-align: right; margin-top: 6px; font-variant-numeric: tabular-nums; }
.contact-limit-warn { display: none; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--r); background: rgba(201,150,58,.08); border: 1px solid rgba(201,150,58,.3); font: 400 13px/1.6 var(--font-body); color: var(--gold); }
.contact-form-card .btn { width: 100%; }
.tickets-section-title { font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ticket-card { border-bottom: 1px solid var(--border); }
/* Une ligne par ticket : un clic déplie la conversation, un seul ticket
   ouvert à la fois (comme dans le panneau admin) */
.ticket-row {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  width: 100%; padding: 18px 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .ticket-row:hover .ticket-subject { color: var(--sakura); } }
.ticket-time { font: 400 12px var(--font-body); color: var(--text-3); white-space: nowrap; }
.ticket-chev { display: inline-flex; color: var(--text-3); transition: transform .25s var(--ease); }
.ticket-chev .ico { width: 16px; height: 16px; }
.ticket-card.is-open .ticket-chev { transform: rotate(90deg); }
.ticket-body { padding: 4px 0 22px; }
.ticket-type-badge, .ticket-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; border-radius: var(--r-ctrl); border: 1px solid var(--border); white-space: nowrap;
}
.ticket-type-badge::before, .ticket-status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ticket-type-bug   { color: var(--red-text); }
.ticket-type-idea  { color: var(--blue-text); }
.ticket-type-other { color: var(--text-2); }
.status-open    { color: var(--gold); }
.status-read    { color: var(--blue); }
.status-replied { color: var(--green); }
.status-closed  { color: var(--text-3); }
.ticket-subject { font: 500 17px/1.3 var(--font-jp); color: var(--text); flex: 1; min-width: 160px; overflow-wrap: anywhere; transition: color .2s ease; }
.ym-thread { display: flex; flex-direction: column; gap: 12px; }
.ym-msg { display: flex; flex-direction: column; max-width: 86%; }
.ym-msg--me { align-self: flex-end; align-items: flex-end; }
.ym-msg--admin { align-self: flex-start; align-items: flex-start; }
.ym-msg__who { font: 400 11px var(--font-body); color: var(--text-3); margin-bottom: 5px; }
.ym-msg__bubble { padding: 12px 16px; border-radius: 16px; font: 400 13.5px/1.65 var(--font-body); color: var(--text); background: var(--ink-3);
  /* pre-line : garde les retours à la ligne du message, sans ses espaces en trop */
  white-space: pre-line; overflow-wrap: anywhere; }
.ym-msg--me .ym-msg__bubble { border-bottom-right-radius: 4px; }
.ym-msg--admin .ym-msg__bubble { background: var(--sakura-soft); border: 1px solid var(--sakura-line); border-bottom-left-radius: 4px; }
.ym-reply { margin-top: 16px; }
.ym-reply textarea { min-height: 76px; }
.ym-reply__acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ym-reply__acts .ticket-suppr { margin-right: auto; }
.ym-ticket-closed { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; font: 400 12px var(--font-body); color: var(--text-3); }
.contact-empty { text-align: center; padding: 56px 20px; color: var(--text-3); font: 400 14px/1.7 var(--font-body); }

/* ============================================================
   10. MODALES - pièces propres à index.html
============================================================ */
body.app-shell .modal { max-width: 560px; }

/* Recherche dans une modale (Ajouter, Créer une liste) */
.search-box { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--ink); transition: border-color .2s ease; }
.search-box:focus-within { border-color: var(--sakura-line); }
.search-icon-wrap { color: var(--text-3); display: flex; margin-right: 10px; }
.search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; font: 400 14px var(--font-body); color: var(--text); }
.suggestions { margin-top: 6px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--ink-2); overflow: hidden; max-height: 280px; overflow-y: auto; animation: ymFade .15s ease; }
.suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--ink-3); }
.suggest-img { position: relative; isolation: isolate; width: 34px; height: 48px; border-radius: var(--r-xs); background: var(--ink-3); flex-shrink: 0; overflow: hidden; }
.suggest-img img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.suggest-info { flex: 1; min-width: 0; }
.suggest-name { font: 500 13.5px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.suggest-meta { font: 400 11.5px var(--font-body); color: var(--text-3); }
.suggest-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.suggest-score { font: 600 12px var(--font-body); color: var(--gold); }
.suggest-link { font: 500 11px var(--font-body); color: var(--sakura); white-space: nowrap; }

#selectedAnimeInfo { display: none; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--r); background: var(--ink); border: 1px solid var(--border-2); }
#selectedAnimeTitle { font: 500 15px var(--font-body); color: var(--text); }
#selectedAnimeMeta { font: 400 12px var(--font-body); color: var(--text-3); margin-top: 3px; }

#formStatusChips { display: flex; gap: 6px; flex-wrap: wrap; }
#formStatusChips .af-chip { cursor: pointer; }
.ym-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }

.score-display { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--ink); }
.score-stars { display: flex; gap: 2px; }
.score-star { font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-3); transition: transform .15s ease, color .15s ease; }
.score-star:hover { transform: scale(1.2); }
.score-star.is-on { color: var(--gold); }
.score-val { font: 600 18px var(--font-body); color: var(--gold); min-width: 34px; text-align: right; }

.progress-input-wrap { display: flex; align-items: center; gap: 10px; }
.progress-input-wrap input { width: 84px; height: 44px; text-align: center; background: var(--ink); border: 1px solid var(--border-2); border-radius: var(--r); font: 500 15px var(--font-body); color: var(--text); outline: none; transition: border-color .2s ease; }
.progress-input-wrap input:focus { border-color: var(--sakura-line); }
.progress-sep { color: var(--text-3); font-size: 16px; }
#formEpsTotal { font: 500 15px var(--font-body); color: var(--text-2); }

/* Auth */
/* Fenêtre de connexion en carte de verre (voir le panneau d'accueil et la
   bourrasque de sakura, index.html). Au bureau : formulaire + panneau au
   kanji, onglets masqués ; sous 820px : formulaire seul, onglets. */
#authModal { background: color-mix(in srgb, var(--overlay) 62%, transparent); }
#authModal .ym-auth { max-width: 480px; } /* passe avant body.app-shell .modal */
.ym-auth {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: color-mix(in srgb, var(--ink-2) 80%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
}
.ym-auth__form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 48px); transition: opacity .2s ease, filter .2s ease; }
.ym-auth__mode { display: none; }
.ym-auth__panneau { display: none; }
@media (min-width: 820px) {
  #authModal .ym-auth { max-width: 860px; grid-template-columns: minmax(0, 1fr) 340px; }
  .ym-auth .auth-tabs { display: none; }
  .ym-auth__marque { display: none; }
  .ym-auth__mode { display: inline; }
  .ym-auth__panneau {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    padding: 40px 36px; border-left: 1px solid var(--border);
    background: linear-gradient(160deg, var(--sakura-soft), transparent 62%), var(--glass);
    transition: opacity .2s ease, filter .2s ease;
  }
  /* Reflet du verre, en biais comme sur une vitre */
  .ym-auth__panneau::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, var(--glass-2) 50%, transparent 62%);
  }
  /* Connexion : panneau à gauche, formulaire à droite (va-et-vient) */
  #authModal .ym-auth.is-panneau-gauche { grid-template-columns: 340px minmax(0, 1fr); }
  .ym-auth.is-panneau-gauche .ym-auth__panneau {
    order: -1; border-left: 0; border-right: 1px solid var(--border);
    background: linear-gradient(200deg, var(--sakura-soft), transparent 62%), var(--glass);
  }
}
.ym-auth__kanji { font: 400 92px/1 var(--font-jp); color: var(--sakura); margin-bottom: 10px; }
.ym-auth__sens { font: 400 12.5px var(--font-body); color: var(--text-3); margin-bottom: 26px; }
.ym-auth__accroche { font: 500 26px/1.25 var(--font-jp); color: var(--text); margin-bottom: 10px; }
.ym-auth__texte { font: 400 14px/1.6 var(--font-body); color: var(--text-2); margin: 0 0 26px; }
.ym-auth__bascule {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-ctrl); cursor: pointer;
  background: transparent; border: 1px solid var(--sakura-line); color: var(--text);
  font: 500 13.5px var(--font-body);
  transition: background .2s ease, border-color .2s ease;
}
.ym-auth__bascule:hover, .ym-auth__bascule:focus-visible { background: var(--sakura-soft); border-color: var(--sakura); }
.ym-auth__bascule .ico { width: 16px; height: 16px; transition: translate .2s ease; }
.ym-auth__bascule:hover .ico { translate: 3px 0; }
.ym-auth__bascule.is-retour .ico { order: -1; scale: -1 1; }
.ym-auth__bascule.is-retour:hover .ico { translate: -3px 0; }
.ym-auth__bascule[hidden] { display: none; }
/* Pendant la bourrasque, le contenu s'efface derrière les pétales */
.ym-auth.is-vent .ym-auth__form, .ym-auth.is-vent .ym-auth__panneau { opacity: 0; filter: blur(3px); }
.ym-auth__vent { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; perspective: 600px; }
.ym-petale { position: absolute; left: 0; top: 0; border-radius: 150% 0 150% 0; }
.ym-auth__souffle { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, transparent, var(--sakura-soft) 40%, var(--sakura-soft) 60%, transparent); }
.ym-petale--0 { background: var(--sakura); }
.ym-petale--1 { background: var(--sakura-2); }
.ym-petale--2 { background: var(--sakura-pale); }
@media (max-width: 620px) { .ym-auth__form { max-height: calc(100vh - 24px); } }

.auth-tabs { display: flex; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.auth-tab { flex: 1; padding: 12px 4px; text-align: center; font: 500 13.5px var(--font-body); color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.auth-tab.active { color: var(--text); border-bottom-color: var(--sakura); }
.auth-error { padding: 12px 16px; margin-bottom: 16px; border-radius: var(--r); background: rgba(220,60,60,.08); border: 1px solid rgba(220,60,60,.3); font: 400 13px/1.6 var(--font-body); color: var(--red-text); }
.auth-info  { padding: 12px 16px; margin-bottom: 16px; border-radius: var(--r); background: var(--sakura-soft); border: 1px solid var(--sakura-line); font: 400 13px/1.6 var(--font-body); color: var(--sakura-2); }
.ym-google {
  width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 18px; border-radius: var(--r-ctrl);
  background: var(--text); color: var(--ink); border: none;
  font: 500 14px var(--font-body); cursor: pointer;
  transition: background .2s ease, transform .3s var(--ease);
}
.ym-google:hover { background: #fff; transform: translateY(-1px); }
/* Thème clair : le bouton est sombre, il ne s'éclaircit pas au survol (le texte
   couleur papier y disparaîtrait) */
:root[data-theme="light"] .ym-google:hover { background: var(--text); }
.ym-or { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 500 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ym-or::before, .ym-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ym-link-btn { background: none; border: none; padding: 0; font: 500 12.5px var(--font-body); color: var(--sakura); cursor: pointer; }
.ym-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.ym-link-muted { background: none; border: none; padding: 0; font: 400 12.5px var(--font-body); color: var(--text-3); cursor: pointer; }
.ym-link-muted:hover { color: var(--text); }
.ym-auth-note { text-align: right; margin-top: -8px; margin-bottom: 8px; }
.ym-auth-step { text-align: center; margin-bottom: 20px; }
.ym-auth-step b { display: block; font: 500 20px/1.3 var(--font-jp); color: var(--text); margin-bottom: 6px; }
.ym-auth-step span { font: 400 13px var(--font-body); color: var(--text-2); }
.ym-otp { font: 600 26px var(--font-body) !important; text-align: center; letter-spacing: .4em !important; padding-left: calc(15px + .4em) !important; }

/* Code de vérification : à l'envoi, les chiffres tournent en cercle le temps
   de la réponse (animationCode, index.html). La scène fait 190px de haut. */
.ym-otp-zone { position: relative; transition: height .45s var(--ease-out); }
.ym-otp-zone .ym-otp { transition: opacity .2s; }
.ym-otp-zone.is-envoi .ym-otp { opacity: 0; pointer-events: none; }
.ym-otp-scene { position: absolute; left: 0; right: 0; top: 0; height: 190px; pointer-events: none; }
.ym-otp-scene > * { position: absolute; left: 50%; top: 50%; }
.ym-otp-scene__anneau { width: 124px; height: 124px; margin: -62px 0 0 -62px; overflow: visible; animation: ymOtpApparait .5s .3s var(--ease-out) both; }
.ym-otp-scene__anneau circle { fill: none; stroke: var(--sakura-line); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; transition: stroke .3s; }
.ym-otp-scene__centre {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  display: grid; place-items: center; box-sizing: border-box;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), box-shadow .3s;
  animation: ymOtpApparait .5s .3s var(--ease-out) both;
}
.ym-otp-scene__centre > svg { grid-area: 1 / 1; }
/* La fleur tourne doucement sur elle-même et respire pendant l'attente */
.ym-otp-fleur { width: 36px; height: 36px; transition: opacity .25s, scale .3s var(--ease-out); animation: ymOtpFleur 4s linear infinite, ymOtpPouls 1.4s .8s ease-in-out infinite; }
.ym-otp-fleur path { fill: var(--sakura); }
.ym-otp-fleur circle { fill: var(--sakura-pale); }
.ym-otp-coche { width: 22px; height: 22px; fill: none; stroke: var(--green-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; }
.ym-otp-scene__orbite { width: 0; height: 0; }
.ym-otp-tuile { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ym-otp-tuile__chiffre {
  position: absolute; left: -19px; top: -22px; width: 38px; height: 44px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--ink-3); border: 1px solid var(--sakura-line); color: var(--text);
  font: 600 19px var(--font-body); font-variant-numeric: tabular-nums;
  transition: border-color .25s, color .25s;
}
/* Bon code : le centre devient une coche verte */
.ym-otp-scene.is-ok .ym-otp-scene__anneau circle { stroke: var(--green-text); }
.ym-otp-scene.is-ok .ym-otp-scene__centre { width: 46px; height: 46px; margin: -23px 0 0 -23px; box-shadow: inset 0 0 0 1.5px var(--green-text); }
.ym-otp-scene.is-ok .ym-otp-fleur { opacity: 0; scale: .4; }
.ym-otp-scene.is-ok .ym-otp-coche { opacity: 1; animation: ymOtpCoche .4s .15s var(--ease-out) forwards; }
/* Mauvais code : les chiffres passent au rouge et la ligne tremble */
.ym-otp-scene.is-refus .ym-otp-tuile__chiffre { border-color: var(--red-text); color: var(--red-text); }
.ym-otp-scene.is-refus .ym-otp-scene__orbite { animation: ymOtpRefus .42s ease-in-out; }
.ym-otp-scene.is-refus .ym-otp-scene__anneau, .ym-otp-scene.is-refus .ym-otp-scene__centre { visibility: hidden; }
@keyframes ymOtpApparait { from { opacity: 0; scale: .6; } }
@keyframes ymOtpPouls { 50% { scale: 1.15; } }
@keyframes ymOtpFleur { to { rotate: 360deg; } }
@keyframes ymOtpCoche { to { stroke-dashoffset: 0; } }
@keyframes ymOtpRefus { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
.ym-auth-hint { text-align: center; margin-top: 10px; font: 400 12.5px var(--font-body); color: var(--text-3); }
.ym-auth-link { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.ym-auth-link:hover { color: var(--sakura); }
.form-label small { font-weight: 400; color: var(--text-3); margin-left: 6px; }
#loginBlockInfo { font: 400 12.5px var(--font-body); color: var(--red-text); margin-top: 8px; }

/* Confirmation */
.btn-danger { background: rgba(220,60,60,.12); color: var(--red-text); border-color: rgba(220,60,60,.35); }
.btn-danger:hover:not(:disabled) { background: rgba(220,60,60,.2); transform: translateY(-2px); }
#confirmMessage { font: 400 14px/1.7 var(--font-body); color: var(--text-2); }
.ym-modal-text { padding: 6px 28px 20px; font: 400 14px/1.7 var(--font-body); color: var(--text-2); }
.ym-modal-stack { display: flex; flex-direction: column; gap: 10px; padding: 0 28px 26px; }
.ym-modal-stack .btn { width: 100%; }
.ym-modal-row { display: flex; gap: 10px; padding: 0 28px 26px; }
.ym-modal-row .btn { flex: 1; }

/* Import */
.ym-import-intro { font: 400 13.5px/1.7 var(--font-body); color: var(--text-2); margin-bottom: 18px; }
.ym-import-intro strong { color: var(--text); font-weight: 600; }
.ym-import-paste { min-height: 132px; font: 400 13.5px/1.8 ui-monospace, 'SF Mono', Menlo, monospace; }
.ym-import-file { width: 100%; margin-top: 10px; }
.ym-import-mal code { font-size: 12.5px; color: var(--text); }
/* AniList : le pseudo suffit, aucun fichier - ce bloc reste donc visible sur
   telephone et tablette, a la difference du choix de fichier reserve au PC. */
.ym-import-anilist { display: flex; gap: 10px; margin-bottom: 18px; }
.ym-import-anilist .form-input { flex: 1; min-width: 0; }
.ym-import-anilist .btn { flex: 0 0 auto; }
/* Téléphone et tablette : écran étroit OU pointeur tactile - l'iPad Pro 13"
   fait 1032px de large et passerait au travers d'un seuil en largeur seule.
   Pas de sélecteur de fichiers, seulement le copier-coller ; 16px sur la zone
   de texte, sinon iOS zoome à la mise au point. */
@media (max-width: 1024px), (pointer: coarse) {
  .ym-import-file, .ym-import-mal { display: none; }
  .ym-import-paste, .ym-import-anilist .form-input { font-size: 16px; }
}
.ym-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r); background: rgba(201,150,58,.07); border: 1px solid rgba(201,150,58,.3); font: 400 12.5px/1.7 var(--font-body); color: var(--text-2); }
.ym-note svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.ym-note strong { color: var(--text); font-weight: 600; }
.ym-note strong.is-gold { color: var(--gold); }
.ym-import-progress { text-align: center; padding: 24px 0; }
.ym-import-progress { padding-top: 0; }
/* Pellicule de l'import : les titres de la liste défilent dans une bande de
   film, les perforations avancent avec elle (--dec, posé par le JS), la
   fenêtre rose marque l'image en cours. Largeur d'image : --pell-w (JS). */
.ym-pell {
  position: relative; height: 108px; margin-bottom: 20px; overflow: hidden;
  background: var(--ink-3); border-radius: var(--r-ctrl);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); /* regle-ok : masque, pas une couleur */
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); /* regle-ok : masque, pas une couleur */
}
.ym-pell::before, .ym-pell::after {
  content: ''; position: absolute; left: 0; right: 0; height: 6px; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 15px);
  background-position-x: var(--dec, 0);
}
.ym-pell::before { top: 4px; }
.ym-pell::after { bottom: 4px; }
.ym-pell__image {
  position: absolute; left: 0; top: 14px; bottom: 14px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  padding: 8px 10px; text-align: left;
  background: var(--ink-2); border-left: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3);
}
.ym-pell__image span {
  font: 500 11.5px/1.35 var(--font-body); color: var(--text-3); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s ease, opacity .2s ease;
}
.ym-pell__image.is-courant span { color: var(--text); }
.ym-pell__image[data-etat="non"] span { opacity: .5; }
.ym-pell__image i { align-self: flex-end; width: 16px; height: 16px; flex-shrink: 0; }
.ym-pell__image i svg { width: 100%; height: 100%; animation: ymPellPoincon .4s var(--ease-out) both; }
.ym-pell__image[data-etat="ok"] i { color: var(--green); }
.ym-pell__image[data-etat="deja"] i { color: var(--gold); }
.ym-pell__image[data-etat="envoye"] i { color: var(--sakura); }
.ym-pell__image[data-etat="non"] i { color: var(--text-3); }
.ym-pell__fenetre {
  position: absolute; top: 12px; bottom: 12px; left: 50%; z-index: 1;
  width: var(--pell-w, 124px); translate: -50% 0; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--sakura); border-radius: 2px;
}
@keyframes ymPellPoincon { from { opacity: 0; scale: 1.7; } }
/* Arrivée : le film se développe. Éclair dans la fenêtre, la bande grandit
   et ses images (largeur 99px, JS) montrent les affiches des animes ajoutés,
   qui se révèlent comme une photo. Le titre reste dessous si l'affiche manque. */
.ym-pell { transition: height .5s var(--ease-out); }
.ym-pell.is-developpe { height: 176px; }
.ym-pell__fenetre { transition: opacity .4s ease; }
.ym-pell.is-developpe .ym-pell__fenetre { opacity: 0; }
.ym-pell__image img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 2px; }
.ym-pell__image img.is-revele { animation: ymPellRevele 1.4s ease-out both; }
.ym-pell.is-flash { animation: ymPellLueur .95s ease-out; }
.ym-pell.is-flash .ym-pell__fenetre { animation: ymPellEclair .95s ease-out both; }
@keyframes ymPellRevele {
  from { opacity: 0; filter: brightness(.25) sepia(1) blur(4px); }
  45%  { opacity: 1; filter: brightness(.65) sepia(.7) blur(1.5px); }
  to   { opacity: 1; filter: none; }
}
@keyframes ymPellLueur { 25% { filter: brightness(1.5); } }
@keyframes ymPellEclair {
  25%  { background: var(--sakura-line); box-shadow: 0 0 46px 14px var(--sakura-soft), inset 0 0 0 1.5px var(--sakura); }
  to   { background: transparent; box-shadow: none; opacity: 0; }
}
#importProgress { font: 400 14px var(--font-body); color: var(--text-2); }
/* Pinceau de l'import : le trait est dessiné par pinceauImport() en pixels ;
   le pinceau dépasse au-dessus (place réservée par la marge, sous la bande) */
.ym-pinceau { position: relative; height: 26px; margin: 46px 0 18px; }
.ym-pinceau svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ym-pinceau__fond { fill: var(--ink-4); opacity: .5; }
.ym-pinceau__encre { fill: var(--sakura); }
.ym-pinceau__papier { fill: white; } /* regle-ok : masque, pas une couleur */
.ym-pinceau__strie { fill: none; stroke: black; stroke-width: .8; stroke-opacity: .6; stroke-linecap: round; } /* regle-ok : masque, pas une couleur */
.ym-pinceau__manche { stroke: var(--gold); stroke-width: 3.6; stroke-linecap: round; }
.ym-pinceau__bague { stroke: var(--text-3); stroke-width: 6.4; }
.ym-pinceau__poils { stroke: var(--sakura-deep); stroke-width: .7; stroke-linejoin: round; }
.ym-pinceau__poil { stop-color: var(--text-2); }
.ym-pinceau__charge { stop-color: var(--sakura-deep); }
.ym-import-done { text-align: center; padding: 8px 0 22px; }
.ym-import-done b { display: block; font: 500 22px/1.3 var(--font-jp); color: var(--text); }
.ym-import-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.ym-import-stat { background: var(--ink); padding: 16px 12px; text-align: center; }
.ym-import-stat b { display: block; font: 600 26px/1 var(--font-body); letter-spacing: -.02em; }
.ym-import-stat span { display: block; margin-top: 8px; font: 500 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ym-import-stat.is-green b { color: var(--green); }
.ym-import-stat.is-gold b  { color: var(--gold); }
.ym-import-stat.is-red b   { color: var(--red-text); }
#importNotFoundList .form-label { margin-top: 4px; }
#importNotFoundItems { padding: 12px 14px; border-radius: var(--r); background: var(--ink); border: 1px solid var(--border); font: 400 12.5px/1.9 var(--font-body); color: var(--text-2); max-height: 140px; overflow-y: auto; }
/* Avec les suggestions et la recherche (rattraperIntrouvables), chaque titre
   prend plusieurs lignes : 140px n'en montrait qu'une et demie. */
#importNotFoundItems:has(.ym-nf) { max-height: min(52vh, 460px); padding: 4px 14px; line-height: 1.4; }

/* Sauvegardes (slots) */
.slot-modal-header { font: 400 13.5px/1.7 var(--font-body); color: var(--text-2); margin-bottom: 16px; }
.slots-grid { display: flex; flex-direction: column; }
.slot-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.slot-item:last-child { border-bottom: none; }
.slot-item.empty { cursor: pointer; opacity: .6; transition: opacity .2s ease; }
.slot-item.empty:hover { opacity: 1; }
.slot-num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-body); color: var(--text-3); flex-shrink: 0; }
.slot-info { flex: 1; min-width: 0; }
.slot-name { font: 500 13.5px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-meta { font: 400 11.5px var(--font-body); color: var(--text-3); margin-top: 2px; }
.slot-plus { color: var(--text-3); display: flex; }
.slot-plus svg { width: 16px; height: 16px; }
.slot-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.slot-btn { height: 28px; padding: 0 11px; border-radius: var(--r-ctrl); border: 1px solid var(--border-2); background: transparent; font: 500 11px var(--font-body); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.slot-btn svg { width: 12px; height: 12px; }
.slot-btn:hover { color: var(--text); border-color: var(--text-3); }
.slot-btn.danger:hover { color: var(--red-text); border-color: rgba(220,60,60,.4); background: rgba(220,60,60,.08); }
.slot-btn.share:hover { color: var(--sakura); border-color: var(--sakura-line); }
.slot-btn.active-share { color: var(--green); border-color: rgba(82,196,140,.4); background: rgba(82,196,140,.08); }
.slot-btn.primary { color: var(--text); border-color: var(--sakura-line); }
.slot-btn.primary:hover { color: #fff; background: var(--sakura-deep); border-color: var(--sakura-deep); }
/* Sauvegarde de secours : posée automatiquement avant chaque restauration,
   elle ne compte pas dans les cinq emplacements. */
.slot-item.is-backup { border-top: 1px solid var(--border); margin-top: 6px; }
/* Listes multiples (2026-10-03) : la liste en cours (numéro sur fond rose) et
   celle que montre la liste publique */
.slot-item.is-active .slot-num { background: var(--sakura-deep); border-color: var(--sakura-deep); color: #fff; }
.slot-meta__en-cours { color: var(--sakura); font-weight: 600; }
.slot-meta__publique { color: var(--green-text); font-weight: 600; }
.modal-footer .btn[hidden] { display: none; }
#saveNameModal .modal-footer { flex-wrap: wrap; }   /* trois boutons pour une nouvelle liste */
.content-meta__liste { color: var(--text-3); }
.slot-item.is-backup .slot-num { border-style: dashed; color: var(--gold); }
.slot-group-label { font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 16px 4px 6px; border-top: 1px solid var(--border); margin-top: 6px; }
/* Téléphone : cinq actions ne tiennent pas à côté du nom - elles passent sur
   leur propre ligne, le nom garde toute la largeur. */
@media (max-width: 620px) {
  .slot-item { flex-wrap: wrap; row-gap: 10px; padding: 14px 4px; }
  .slot-info { flex: 1 1 auto; }
  .slot-actions { flex: 1 0 100%; justify-content: flex-start; }
}

/* Créer une liste */
.create-list-animes { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--r); }
.create-list-anime-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.create-list-anime-item:last-child { border-bottom: none; }
.create-list-anime-num { font: 500 11px var(--font-body); color: var(--text-3); min-width: 20px; font-variant-numeric: tabular-nums; }
.create-list-anime-title { flex: 1; font: 500 13.5px var(--font-body); color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.create-list-empty { padding: 18px; text-align: center; font: 400 12.5px var(--font-body); color: var(--text-3); }
.btn-remove-anime { display: flex; padding: 4px; border-radius: 50%; color: var(--text-3); transition: color .15s ease; }
.btn-remove-anime svg { width: 13px; height: 13px; }
.btn-remove-anime:hover { color: var(--red-text); }
.ym-inline-error { display: none; font: 400 12.5px var(--font-body); color: var(--red-text); margin-top: 10px; }

/* « Publier ma liste » / « Ma liste publique », sous le titre de Ma Liste
   (2026-10-03) : la publication était cachée dans les sauvegardes. Publiée,
   la pastille passe en contour, avec un point vert « en direct ». */
.ym-publier { margin-top: 14px; }
.ym-publier[hidden] { display: none; }
.ym-publier .ico { width: 15px; height: 15px; }
.ym-publier.is-publiee .ico { display: none; }
.ym-publier.is-publiee::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); box-shadow: 0 0 0 3px var(--glass);
}
@media (max-width: 1024px) {
  .content .ym-publier { margin-top: 0; align-self: center; }
}

/* Invitation à faire sa première sauvegarde, en tête de Ma Liste */
.ym-invite {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  padding: 16px 20px; margin-bottom: 26px;
  border: 1px solid var(--sakura-line); border-radius: var(--r-lg); background: var(--sakura-soft);
}
.ym-invite[hidden] { display: none; }
.ym-invite__txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 300px; min-width: 0; }
.ym-invite__txt b { font: 600 14.5px/1.4 var(--font-body); color: var(--text); }
.ym-invite__txt span { font: 400 13px/1.55 var(--font-body); color: var(--text-2); }
.ym-invite__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Fenêtre « Ma liste publique » */
.ym-publier__fiche { display: flex; flex-direction: column; gap: 6px; }
.ym-publier__nom { font: 500 18px/1.3 var(--font-jp); color: var(--text); }
.ym-publier__meta { font: 400 12.5px var(--font-body); color: var(--text-3); }
.ym-publier__desc { font: 400 13.5px/1.6 var(--font-body); color: var(--text-2); margin: 6px 0 0; }
#maListePied { flex-wrap: wrap; }

/* Détail d'une liste partagée */
#sharedListModal .modal { max-width: 640px; }
.shared-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 6px 28px 22px; border-bottom: 1px solid var(--border); }
.shared-detail-info { flex: 1; min-width: 0; }
.shared-detail-title { font: 500 24px/1.25 var(--font-jp); color: var(--text); margin-bottom: 8px; }
.shared-detail-desc { font: 400 14px/1.65 var(--font-body); color: var(--text-2); margin-bottom: 12px; }
.shared-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; font: 400 12.5px var(--font-body); color: var(--text-3); }
.shared-detail-meta span { display: inline-flex; align-items: center; gap: 6px; }
.shared-detail-meta svg { width: 13px; height: 13px; }
.shared-detail-meta [onclick] { cursor: pointer; transition: color .2s ease; }
.shared-detail-meta [onclick]:hover { color: var(--text); }
.shared-detail-animes { padding: 6px 28px 10px; overflow-y: auto; max-height: 440px; }
.shared-detail-anime { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.shared-detail-anime:last-child { border-bottom: none; }
.shared-detail-poster { width: 40px; height: 56px; border-radius: var(--r-xs); object-fit: cover; background: var(--ink-3); flex-shrink: 0; }
.shared-detail-anime-info { flex: 1; min-width: 0; }
.shared-detail-anime-title { font: 500 14px var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shared-detail-anime-meta { font: 400 11.5px var(--font-body); color: var(--text-3); margin-top: 3px; }
.shared-detail-anime-note { font: 400 12px/1.5 var(--font-body); color: var(--text-2); font-style: italic; margin-top: 4px; }
/* Recherche et genres d'une liste publiée (2026-10-03) ; chaque anime mène à
   sa fiche */
.shared-detail-outils { display: flex; flex-direction: column; gap: 12px; padding: 16px 28px 12px; border-bottom: 1px solid var(--border); }
.shared-detail-recherche { width: 100%; }
.shared-detail-genres { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.shared-detail-genres::-webkit-scrollbar { display: none; }
.shared-detail-genres[hidden] { display: none; }
.shared-detail-genres .season-filter-btn { flex-shrink: 0; gap: 6px; }
.shared-detail-genre-n { font-size: 11px; color: var(--text-3); }
.shared-detail-genres .season-filter-btn.active .shared-detail-genre-n { color: inherit; opacity: .75; }
.shared-detail-compte { font: 400 12px var(--font-body); color: var(--text-3); }
.shared-detail-anime.is-lien {
  cursor: pointer; padding: 12px 10px; margin: 0 -10px;
  border-radius: var(--r-xs); transition: background .15s ease;
}
.shared-detail-anime.is-lien:hover { background: var(--glass); }
.shared-detail-anime.is-lien:focus-visible { outline: 2px solid var(--sakura-line); outline-offset: -2px; }
.btn-add-to-list { height: 30px; padding: 0 12px; border-radius: var(--r-ctrl); border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font: 500 11.5px var(--font-body); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.btn-add-to-list:hover { color: var(--sakura); border-color: var(--sakura-line); }
.btn-add-to-list.added { color: var(--green); border-color: rgba(82,196,140,.4); background: rgba(82,196,140,.08); }

/* Sélecteur de statut flottant */
.status-picker { padding: 6px; min-width: 180px; background: var(--ink-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.status-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-xs); font: 500 13px var(--font-body); color: var(--text-2); cursor: pointer; transition: background .15s ease, color .15s ease; }
.status-option:hover { background: var(--ink-3); color: var(--text); }

/* ============================================================
   12. RESPONSIVE
============================================================ */
/* ============================================================
   MOBILE / TABLETTE - Explorer
============================================================ */
@media (max-width: 1024px) {
  /* 16 genres tenaient sur 6 rangées : une seule rangée qui se balaye */
  #searchGenreFilters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 calc(-1 * var(--gutter)) 20px; padding: 2px var(--gutter) 6px;
    scroll-padding-inline: var(--gutter);
  }
  #searchGenreFilters::-webkit-scrollbar { display: none; }
  #searchGenreFilters .season-filter-btn { flex-shrink: 0; }
  /* les trois listes déroulantes sur une seule rangée au lieu de deux */
  #sectionSearch .ym-toolbar__group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  #sectionSearch .ym-select { width: 100%; min-width: 0; height: 40px; padding-right: 26px; }
}

@media (max-width: 560px) {
  /* trois colonnes couperaient « Toutes les années » : deux colonnes, le tri
     sur la largeur complète en dessous */
  #sectionSearch .ym-toolbar__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sectionSearch .ym-toolbar__group > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .main { grid-template-columns: 232px minmax(0, 1fr); gap: 0 36px; }
  .news-mosaic { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  body.app-shell { padding-bottom: 64px; }
  .main { grid-template-columns: 1fr; }
  /* Le rail se réduit à une seule rangée de statuts qui défile ; l'identité
     (avatar, pseudo, rôle) reste au profil, les sauvegardes passent dans
     la rangée d'outils de l'en-tête. */
  .sidebar { position: static; max-height: none; padding: 16px 0 14px; border-bottom: 1px solid var(--border); }
  .sidebar-section { margin-bottom: 0; }
  .sidebar-identity, .sidebar-title, .sidebar-jp { display: none; }
  #saveSlotsSection { display: none !important; }
  .list-nav {
    flex-direction: row; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .list-nav::-webkit-scrollbar { display: none; }
  .list-nav-item { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--border) !important; border-radius: var(--r-ctrl); gap: 8px; }
  .list-nav-item.active { border-color: var(--sakura-line) !important; background: var(--sakura-soft); }
  .ym-tool--slots { display: inline-flex !important; }
  .content .ym-section-head { padding: 24px 0 18px; margin-bottom: 0; row-gap: 14px; border-bottom: none; }
  .content .ym-section-head > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .content .ym-section-head .ym-meta { margin-top: 0; }
  .content .ym-section-head__tools { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .content .ym-section-head__tools .ym-search { flex: 1 1 auto; min-width: 0; }
  .content .sort-bar { padding: 10px 0; margin-bottom: 16px; border-top: 1px solid var(--border); }
  .ym-today__inner { grid-template-columns: 1fr; gap: 10px; padding-block: 14px; }
  .ym-today__head { flex-direction: row; align-items: baseline; gap: 10px; }
  .ym-today__head b { font-size: 17px; }
  .ym-today__rail { margin: 0 calc(-1 * var(--gutter)); }
  .ym-today__nav { display: none; }  /* le rail se fait glisser au doigt */
  .ym-today__list { padding: 2px var(--gutter); }
  .ym-today-card { min-width: 0; padding: 5px 14px 5px 5px; }
  .ym-today-poster, .ym-today-fallback { width: 32px; height: 32px; }
  .anime-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .anime-card { grid-template-columns: 40px minmax(0, 1fr) auto auto 30px; column-gap: 12px; }
  .anime-card > .anime-fav { grid-column: 5; }
  .anime-status-badge, .anime-gear { display: none; }
  .anime-progress { min-width: 60px; }
  .news-hero { grid-template-columns: 1fr; }
  .news-hero-image { min-height: 220px; }
  .news-hero-body { padding: 26px 24px; }
  .news-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .news-card-lg, .news-card-wide { grid-column: span 2; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .surprise-cards { justify-content: flex-start; overflow-x: auto; padding: 8px 4px 16px; scrollbar-width: none; }
  .surprise-cards::-webkit-scrollbar { display: none; }
  .surprise-card-wrap { width: 140px; }
  .surprise-card { width: 140px; height: 236px; }
  .surprise-card-poster { height: 150px; }
  .ym-guest__stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .ym-guest__stat { padding: 14px 12px; }
  .ym-guest__stat b { font-size: 20px; }
  .ym-search { min-width: 0; width: 100%; }
  .shared-detail-header, .shared-detail-animes, .shared-detail-outils { padding-left: 20px; padding-right: 20px; }
  .ym-modal-text, .ym-modal-stack, .ym-modal-row { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 560px) {
  /* barre compacte seulement hors feuille de menu */
  .nav > .nav-right .ym-logout { width: 32px; padding: 0 !important; }
  .nav > .nav-right .ym-logout span { display: none; }
  .content .ym-section-head { padding-top: 22px; }
  .sort-bar .ym-toolbar__group:first-child { gap: 2px; }
  .sort-bar .sort-btn { padding: 0 10px; font-size: 12.5px; }
  .seasonal-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .anime-grid { grid-template-columns: repeat(2, 1fr); }
  .ym-section-head { padding-top: 32px; }
  .ym-toolbar__lbl { display: none; }
  .season-label { min-width: 0; }
  .ym-import-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   IMPORT - rattraper les titres non trouvés (suggestions + recherche)
============================================================ */
.ym-nf { padding: 12px 0; border-top: 1px solid var(--border); }
.ym-nf:first-child { border-top: 0; }
.ym-nf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ym-nf__head b { font: 600 13px/1.4 var(--font-body); color: var(--text); }
.ym-nf__etat { font: 400 12px var(--font-body); color: var(--text-3); }
.ym-nf { transition: opacity .2s ease; }
.ym-nf.is-leaving { opacity: 0; pointer-events: none; }
.ym-nf__choix { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ym-nf__option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 10px 6px 6px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--ink-2); color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}
.ym-nf__option:hover { border-color: var(--sakura-line); background: var(--ink-3); }
.ym-nf__option:disabled { opacity: .5; cursor: default; }
.ym-nf__poster { position: relative; flex: 0 0 30px; height: 42px; border-radius: 4px; overflow: hidden; background: var(--ink-3); }
.ym-nf__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ym-nf__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ym-nf__titre { font: 500 12.5px/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-nf__meta { font: 400 11px var(--font-body); color: var(--text-3); }
.ym-nf__plus { flex: 0 0 auto; color: var(--sakura); display: inline-flex; }
.ym-nf__plus .ico { width: 15px; height: 15px; }
.ym-nf__autre { align-self: flex-start; padding: 4px 0; border: 0; background: none; color: var(--sakura); font: 500 12px var(--font-body); cursor: pointer; }
.ym-nf__autre:hover { text-decoration: underline; text-underline-offset: 3px; }
.ym-nf__search { display: flex; flex-direction: column; gap: 6px; }
.ym-nf__form { display: flex; gap: 8px; }
.ym-nf__form[hidden] { display: none; }
.ym-nf__form .form-input { flex: 1; min-width: 0; }
.ym-nf__resultats { display: flex; flex-direction: column; gap: 6px; font: 400 12px var(--font-body); color: var(--text-3); }
.ym-nf__option.is-open { border-color: var(--sakura-line); background: var(--ink-3); }
.ym-nf__option.is-open .ym-nf__plus .ico { transform: rotate(90deg); }
.ym-nf__plus .ico { transition: transform .2s ease; }
/* Aperçu d'une suggestion, déplié sous le choix cliqué */
.ym-nf__apercu {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: 1px solid var(--sakura-line); border-radius: var(--r); background: var(--ink-2);
}
.ym-nf__ap-haut { display: flex; gap: 12px; align-items: flex-start; }
.ym-nf__ap-poster { position: relative; flex: 0 0 64px; height: 90px; border-radius: 6px; overflow: hidden; background: var(--ink-3); }
.ym-nf__ap-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ym-nf__ap-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ym-nf__ap-titre { font: 600 14px/1.35 var(--font-body); color: var(--text); }
.ym-nf__ap-synopsis {
  margin: 0; font: 400 12.5px/1.55 var(--font-body); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.ym-nf__ap-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ym-nf__ap-actions .btn { padding: 7px 14px; font-size: 12.5px; }

/* Loupe de recherche (recherche-globale.js) : en visite sans compte, #navRight
   est masqué au bureau (place gardée) ; la loupe, elle, reste utilisable. */
body.is-guest-browsing #navRight .ym-gs-btn { visibility: visible; pointer-events: auto; }

/* Barre complète entre 1300 et 1459 px : avec la loupe de recherche (30/09),
   les liens passaient sous le bloc de droite d'un admin (mesuré : 59 px de
   chevauchement à 1300 px, 15 px déjà avant la loupe à cause du bouton
   « Admin »). Liens et bloc de droite un peu resserrés, rien ne disparaît. */
@media (min-width: 1300px) and (max-width: 1459px) {
  .nav-links a { padding-left: 9px; padding-right: 9px; }
  .nav-right { gap: 7px; }
}

/* Ajout à la liste (envolVersMaListe) : la copie de l'affiche qui file vers
   « Ma Liste », puis le sceau +1 en exposant sur le lien (ou le bouton du
   menu sous 1300 px), qui fléchit un instant en le recevant. */
.ym-vol {
  position: fixed; z-index: 150; pointer-events: none;
  border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--shadow-2);
  transform-origin: center; will-change: transform, opacity;
}
.nav-burger { position: relative; }
.ym-frappe {
  position: absolute; z-index: 3; left: calc(100% - 12px); top: -3px;
  min-width: 26px; height: 22px; padding: 0 5px; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctrl); font: 700 11.5px var(--font-body); color: var(--white);
  background: var(--sakura-deep);
  box-shadow: inset 0 0 0 2px var(--sakura-deep), inset 0 0 0 3px var(--sceau-filet);
}
.nav-burger .ym-frappe { top: -9px; left: calc(100% - 14px); }
.is-recoit { animation: ymRecoit .45s var(--ease-out); }
@keyframes ymRecoit { 30% { transform: translateY(2px) scale(.94); } }