/* ============================================================================
   /packs/<slug>/ — une page par pack (EN seulement). Chargée seulement là.
   Variables et styles de base viennent de site.css (--bg, --line, --serif…).
   Aucun JS : la carte des préfectures est statique, il n'y a rien à piloter.
   ============================================================================ */

/* ---------- fil d'Ariane ---------- */
.crumbs { margin: 0 0 1.4rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.crumbs li { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--mute); }
.crumbs li + li::before { content: "›"; margin-right: 0.4rem; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--coral); }

/* ---------- en-tête : couverture + texte ---------- */
.pack-top { padding-top: 2.2rem; }
.pack-head {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 40px); align-items: start;
  margin-bottom: clamp(26px, 3.6vw, 42px);
}
.pack-cov {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  background: var(--bg-deep);
}
.pack-cov img { display: block; width: 100%; height: auto; }
.pack-lead h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.12;
  margin: 0.3rem 0 0.5rem; text-wrap: balance;
}
.pack-ja { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.05rem; color: var(--mute); }
/* `.pstats` de site.css est en 4 colonnes (la page /packs/ a 4 chiffres) : ici il n'y en a
   que 2, sans quoi une 3e case vide se dessine à droite. */
.pstats.pack-stats { grid-template-columns: repeat(2, 1fr); max-width: 320px; margin: 0 0 1.4rem; }
.pack-lead .btn-row { flex-wrap: wrap; }

/* ---------- intro + carte ---------- */
.pack-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(20px, 3.4vw, 44px); align-items: start;
  padding-bottom: clamp(26px, 3.6vw, 44px);
}
.pack-intro { max-width: none; margin: 0; }
.pack-intro p { margin: 0 0 1rem; }
.pack-intro p:last-child { margin-bottom: 0; }

.pack-map {
  margin: 0; padding: 0.6rem 0.6rem 0.2rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.jp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jp-map { display: block; width: 100%; height: auto; }
.jp-map .jp-base { fill: #e0d4bf; }
.pack-map figcaption {
  text-align: center; padding: 0.1rem 0 0.5rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}

/* ---------- la liste des lieux ---------- */
/* le bloc intro+carte ferme déjà la section : sans ça deux paddings de section
   s'additionnent et creusent une bande vide de ~90 px avant le premier groupe. */
.pack-top { padding-bottom: 0; }
.pack-places { padding-top: 0; }
.pack-places .pref-h:first-child { margin-top: 0; }
.pref-h {
  margin: 2.2rem 0 0.9rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
}
.pref-h span[lang="ja"] { font-family: var(--serif); font-size: 0.82em; color: var(--mute); }

.plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem 1.8rem; }
.place { display: flex; gap: 0.95rem; align-items: flex-start; }
.place img {
  flex: none; width: 120px; height: 120px; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-deep);
}
.pl-txt { min-width: 0; }
.place h3 { margin: 0 0 0.1rem; font-size: 1.02rem; line-height: 1.25; }
.pl-ja { display: block; margin-bottom: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--mute); }
.place p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- crédits photo ---------- */
.credits { margin: 2.4rem 0 0; font-size: 0.8rem; }
.credits summary {
  cursor: pointer; font-weight: 700; color: var(--ink-soft);
  padding: 0.5rem 0; border-top: 1px solid var(--line);
}
.credits ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--mute); }
.credits li { margin-bottom: 0.25rem; line-height: 1.45; }
.credits a { color: var(--ink-soft); }

.pack-open {
  margin: 2rem 0 1.6rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft);
}
.pack-open a { color: var(--coral); }

/* ---------- « More <catégorie> packs » ---------- */
/* Les tuiles réutilisent `.packs` / `.pack` de site.css : même objet que sur l'accueil.
   L'ancien prev/next (.pack-nav / .pn) a été retiré — l'ordre d'ajout au catalogue
   n'apprenait rien au lecteur, les voisins de catégorie si. */
.pack-more { margin-top: clamp(28px, 3.6vw, 48px); }
.more-h { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 0 0 1.2rem; }
/* 2e bloc (« More packs to explore ») : il complète le bloc thématique quand la catégorie
   compte moins de MORE_MIN voisins. Il a son propre titre pour ne pas faire passer des
   packs d'ailleurs pour des packs de la catégorie. */
.more-h2 { margin-top: clamp(26px, 3vw, 40px); font-size: clamp(1.1rem, 2.1vw, 1.4rem); }
.more-all { margin: 1.8rem 0 0; text-align: center; }

/* ---------- mobile ---------- */
@media (max-width: 899px) {
  .plist { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pack-body { grid-template-columns: 1fr; }
  /* la carte passe AU-DESSUS de l'intro : elle situe le pack avant qu'on le lise */
  .pack-map { order: -1; max-width: 380px; margin-inline: auto; }
}
@media (max-width: 719px) {
  .pack-head { grid-template-columns: 1fr; }
  .pack-cov { max-width: 240px; }
  .place img { width: 92px; height: 92px; }
}

/* ---------- guides /guides/ et /guides/<slug>/ (lot C, 2026-11-04) ---------- */
/* Même feuille que les pages packs : `.crumbs` et le bloc « More … » y vivent déjà,
   les dupliquer dans un guide.css les aurait fait dériver. */
.guide-sec { padding-top: 2.2rem; }
.guide .updated { margin-bottom: 2.2rem; }
.guide h2 { scroll-margin-top: 90px; }
.guide h3 { scroll-margin-top: 90px; }
/* figure : pleine largeur de la colonne de prose. `height: auto` est indispensable —
   les attributs width/height portent les dimensions réelles du fichier (anti-CLS),
   sans quoi l'image est étirée (gotcha WEBSITE.md §9). */
.gfig { margin: 2rem 0; }
/* `max-height` + `width: auto` : une photo de carnet est souvent en portrait (585x800,
   1367x1923) et occuperait 900 px de haut dans la colonne de prose. On la borne sans la
   recadrer — le ratio reste celui des attributs width/height, donc pas de CLS. */
.gfig img {
  display: block; max-width: 100%; width: auto; height: auto; max-height: 520px;
  margin-inline: auto;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card);
}
.gfig figcaption {
  margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.45; color: var(--mute);
}
.gfig figcaption a { color: var(--ink-soft); font-weight: 600; }
/* FAQ du guide : replié par défaut, même objet que la FAQ de /support/ */
.guide-faq { margin: 0.6rem 0 2rem; }
/* index des guides */
.guide-lead { margin-bottom: clamp(20px, 3vw, 34px); }
.gcards { display: grid; gap: clamp(14px, 2vw, 22px); max-width: 720px; margin-inline: auto; }  /* = .prose : le h1 et les cartes sur le même bord gauche */
.gcard {
  display: block; text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.25rem 1.4rem; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gcard h2 { margin: 0 0 0.45rem; font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.25; }
.gcard p { margin: 0 0 0.7rem; font-size: 0.93rem; line-height: 1.55; color: var(--ink-soft); }
.gcard-cta { font-size: 0.82rem; font-weight: 800; color: var(--coral); }