/* ============================================================================
   /packs/ — l'espace d'exploration du catalogue.
   Chargé UNIQUEMENT sur cette page (les autres n'ont rien à en faire).
   Écrit d'un bloc : ce fichier ne doit pas redevenir un patchwork de retouches.

   Principe : une carte du Japon à gauche, un carrousel de packs à droite.
   La couche allumée sur la carte suit le pack pointé. La carte est le SEUL
   porteur de la couleur du pack — pas de liseré, pas d'anneau, pas de
   capitales colorées.
   ============================================================================ */

/* ---------- ossature ---------- */
.explore {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;           /* la carte prend la hauteur du rail */
}

/* ---------- la carte ----------
   Pas de panneau blanc : la carte est posée à même le papier. Le padding reproduit
   celui du rail (4 px en haut, 14 px en bas) pour que le haut et le bas de la carte
   tombent exactement sur ceux des fiches. */
.mapside { padding: 4px 0 14px; }
.mapside-in { display: flex; flex-direction: column; height: 100%; }
.jp-map { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
.jp-map .jp-base { fill: #e0d4bf; }
.jp-lay { opacity: 0; transition: opacity 0.28s var(--ease); }
.jp-lay.is-on { opacity: 1; }
/* la géométrie des 47 préfectures n'est émise qu'une fois, dans un <defs> caché */
.jp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.map-cap { flex: none; margin: 0.5rem 0 0; text-align: center; min-height: 3rem; }
.map-cap b {
  display: block;
  font-family: var(--serif); font-weight: 900; font-size: 1.02rem;
  line-height: 1.2; letter-spacing: -0.01em;
}
.map-cap span {
  display: block; margin-top: 0.18rem;
  font-size: 0.8rem; font-weight: 600; color: var(--mute);
}

/* ---------- le carrousel ---------- */
.rail-wrap { position: relative; min-width: 0; }
.rail {
  display: flex;
  gap: clamp(12px, 1.4vw, 18px);
  padding: 4px 4px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* ⚠️ Aucun estompage des bords du rail. Deux versions ont été essayées et retirées :
   - `mask-image` sur .rail : le masque force la rasterisation du rail dans une couche à
     part et Chromium la fige dans un état antérieur — rendu cassé, très trompeur ;
   - dégradés en overlay : ils lavent le bord des fiches blanches, ça fait sale.
   Les flèches et la fiche coupée au bord suffisent à dire que ça défile. */

.rail-btn {
  position: absolute; top: calc(50% - 26px); z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s ease, transform 0.16s ease;
}
.rail-btn:hover { transform: scale(1.06); }
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn.prev { left: -14px; }
.rail-btn.next { right: -14px; }
.rail-btn[disabled] { opacity: 0; pointer-events: none; }

/* ---------- la fiche ---------- */
.pcard {
  flex: 0 0 236px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}
.pcard[hidden] { display: none; }
.pcard:hover,
.pcard:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.pcard.is-active { border-color: var(--pc, var(--line)); box-shadow: var(--shadow-card); }

.pc-cov { position: relative; aspect-ratio: 16 / 10; background: var(--bg-deep); }
.pc-cov img { width: 100%; height: 100%; object-fit: cover; }
.pc-new {
  position: absolute; top: 9px; left: 9px;
  background: var(--gold); color: #fff;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.18rem 0.48rem; border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.pc-body { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 1rem 0.85rem; }
.pc-cat {
  margin: 0 0 0.25rem;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--mute);
}

/* Les fiches d'un rail s'étirent sur la plus haute : sans bornes, un titre de 3 lignes
   creuse une bande vide dans les 32 autres. Chaque bloc a donc une hauteur fixe. */
.pcard h3 {
  margin-bottom: 0.08rem; min-height: 2.5em;
  font-size: 1.04rem; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.pc-ja {
  margin: 0 0 0.4rem;
  font-size: 0.8rem; font-weight: 600; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-desc {
  /* 0.85rem et non 0.87 : à 0.87 les descriptions les plus longues tenaient en 3 lignes
     dans mon rendu headless mais débordaient dans un vrai navigateur — aucune marge. */
  margin: 0 0 0.45rem; min-height: 4.4em;
  font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pc-inc {
  margin: 0 0 0.6rem; min-height: 2.9em;
  font-size: 0.78rem; color: var(--mute);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.pc-inc span {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pc-meta {
  margin: auto 0 0; padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 0.35rem;
  font-size: 0.82rem; color: var(--ink-soft);
}
.pc-meta b { font-family: var(--serif); font-weight: 900; font-size: 0.98rem; color: var(--ink); }
.pc-meta i { font-style: normal; color: var(--line); padding-inline: 0.1rem; }

/* ---------- empilé ---------- */
@media (max-width: 900px) {
  .explore { grid-template-columns: 1fr; gap: 1rem; }
  .mapside { padding: 0; }
  .mapside-in {
    display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 1rem;
    height: auto; padding: 0.2rem 0;
  }
  .jp-map { flex: none; height: auto; }
  .map-cap { margin: 0; min-height: 0; text-align: left; }
  .rail-btn { display: none; }
  .rail { scroll-snap-type: x proximity; }
}
@media (max-width: 480px) {
  /* ⚠️ NE PAS rétrécir la fiche sous 236 px : à 224 px, 3 descriptions repassaient
     au-dessus de 3 lignes et se faisaient tronquer. Le rail défile, la largeur peut rester. */
  .mapside-in { grid-template-columns: 84px 1fr; }
}