/* fonts.css est chargé en <link> à côté de celui-ci (un @import ici sérialiserait
   les requêtes : CSS -> CSS -> woff2). Ne pas le réimporter. */

/* ============================================================
   Japan Quests — design system (aligné sur src/theme.js de l'app)
   ============================================================ */
:root {
  --bg: #faf6ef;
  --bg-deep: #efe6d8;
  --card: #ffffff;
  --ink: #1b1714;
  --ink-soft: #5c5349;
  --mute: #9c9285;
  --line: #ece3d4;
  --coral: #ee5b43;
  --coral-soft: #fceae5;
  --teal: #0f8b82;
  --teal-soft: #e3f2f0;
  --gold: #d9962b;
  --gold-soft: #faf0da;
  --green: #3fa35e;

  --serif: "Fraunces", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Yu Gothic UI", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;

  --shadow-soft: 0 2px 10px rgba(58, 47, 32, 0.07);
  --shadow-card: 0 6px 18px rgba(58, 47, 32, 0.1);
  --shadow-lift: 0 18px 44px rgba(58, 47, 32, 0.16);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --pad: clamp(20px, 5vw, 40px);
  --maxw: 1140px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* la nav est collante : sans ça, une ancre (#how, #cat-x) atterrit sous la barre */
  scroll-padding-top: calc(var(--nav-h) + 18px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain papier : le crème plat devient du washi.
   Posé en background sur les surfaces (pas en overlay) pour ne pas salir photos et captures. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
body { background-image: var(--grain); background-attachment: fixed; }

::selection { background: var(--coral); color: #fff; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.6vw, 3.6rem); text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); text-wrap: balance; }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* langue JA : Fraunces n'a pas de glyphes CJK → serif système */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .display {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  letter-spacing: 0.01em; line-height: 1.3;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.eyebrow {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 0.9rem;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-soft); max-width: 56ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
section { padding-block: clamp(52px, 6.4vw, 88px); position: relative; }
section.tight { padding-block: clamp(28px, 3.4vw, 46px); }
.sec-head { margin-bottom: clamp(30px, 4.4vw, 50px); }
.sec-head p { margin-bottom: 0; }
.sec-head h2 + .lede { margin-top: 0.85rem; }

/* Rythme : une section sur deux passe en crème profond, avec un filet en haut et en bas.
   Sans ça, la page est un seul aplat beige de 8 800 px. */
section.tone {
  background: var(--bg-deep); background-image: var(--grain); background-attachment: fixed;
  border-block: 1px solid var(--line);
}

/* Fond « courbes de niveau » du bloc features uniquement (section.tone sert aussi aux
   packs et à la FAQ — d'où la classe .topo en plus, et pas une règle sur .tone).
   `multiply` plutôt qu'une simple opacité : la trame est une encre sur crème, donc son
   propre fond crème délaverait le crème profond de la section. En multiply, le crème de
   l'image ≈ neutre et seules les lignes assombrissent. */
section.topo { position: relative; isolation: isolate; }
section.topo::before {
  content: "";
  /* ⚠️ `inset: 0` s'arrête à la BOÎTE DE PADDING : les 1px de border-block restent
     découverts, et la trame se détache visiblement du filet du bas. `-1px` la fait
     courir sous les deux filets, sans débordement puisque le parent est en overflow
     normal et que ::before est en absolute. */
  position: absolute; inset: -1px 0; z-index: -1; pointer-events: none;
  background: url("/assets/img/topo.webp") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.12;
}
/* La trame n'apporte rien en lecture : on l'enlève quand l'utilisateur demande moins de
   fioritures, et sur les petits écrans où elle passerait sous les cartes en pleine largeur. */
@media (prefers-reduced-motion: reduce), (max-width: 640px) { section.topo::before { display: none; } }

/* ---------- révélation au scroll ----------
   Masqué seulement si le navigateur sait qu'il exécute du JS : sans script (ou moteur
   ancien qui ignore la media query), le contenu reste visible. site.js pose .revealed. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-r] { opacity: 0; transform: translateY(16px); }
  [data-r].revealed,
  html.no-reveal [data-r] { opacity: 1; transform: none; }
  [data-r] { transition: opacity 0.62s var(--ease), transform 0.62s var(--ease); }
}

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; text-decoration: none;
  padding: 0.92rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-card); }
.btn-primary:hover { box-shadow: var(--shadow-lift); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(27, 23, 20, 0.18); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.btn-play { padding-block: 0.72rem; padding-left: 1.15rem; text-align: left; line-height: 1.15; }
.btn-play .pl-sub { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.72; }
.btn-play .pl-main { display: block; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn-row-center { justify-content: center; }
/* Mobile : les deux CTA restent CÔTE À CÔTE. À leur taille naturelle ils totalisaient
   344 px pour 350 px de large à 390 px — ça passait de justesse et ça se cassait en deux
   lignes mal alignées dès 370 px, donc un rendu différent selon le téléphone. Ici ils se
   PARTAGENT la largeur (`flex: 1 1 0`) et resserrent leur gabarit : identique partout. */
@media (max-width: 560px) {
  .btn-row { flex-wrap: nowrap; gap: 0.55rem; }
  .btn-row > * { flex: 1 1 0; min-width: 0; }
  .btn-row .btn { padding-inline: 0.7rem; font-size: 0.94rem; }
  .btn-play { padding-left: 0.7rem; }
  .btn-play .pl-main { font-size: 0.97rem; }
  .btn-play svg { width: 18px; height: 20px; flex: none; }
}
/* Très petits écrans (SE 1re gén., 320 px) : à ce gabarit « Read the FAQ » du CTA de bas
   de page était tronqué (`.btn` est en `white-space: nowrap`). Un cran de plus. */
@media (max-width: 340px) {
  .btn-row .btn { padding-inline: 0.5rem; font-size: 0.86rem; }
  .btn-play .pl-main { font-size: 0.9rem; }
  .btn-play .pl-sub { font-size: 0.56rem; }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(58, 47, 32, 0.05); }
.nav-in { display: flex; align-items: center; gap: 1.4rem; height: 68px; }
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; font-family: var(--serif); font-weight: 900; font-size: 1.16rem; letter-spacing: -0.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-soft); }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; }
.nav-links a { text-decoration: none; font-size: 0.94rem; font-weight: 600; color: var(--ink-soft); transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--coral); }
.nav .btn { padding: 0.6rem 1.15rem; font-size: 0.92rem; }
.nav-links a { position: relative; }
.nav-links .nav-hide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform 0.24s var(--ease);
}
.nav-links .nav-hide:hover::after, .nav-links .nav-hide[aria-current="page"]::after { transform: scaleX(1); }

/* burger + panneau (le menu ne doit pas disparaître purement et simplement sous 860 px) */
.burger {
  display: none; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none;
  margin-left: auto; background: none; border: 1.5px solid rgba(27, 23, 20, 0.14); border-radius: 12px;
  color: var(--ink); cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }
.burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.navpanel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card);
  padding: 0.6rem var(--pad) 1.1rem; display: grid; gap: 0.15rem;
  opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.24s var(--ease);
}
.navpanel[hidden] { display: none; }
.navpanel.open { opacity: 1; transform: none; }
/* :not(.btn) — sinon la règle repeint le CTA Play en encre sur fond encre (texte invisible) */
.navpanel > a:not(.btn) { text-decoration: none; font-weight: 700; font-size: 1.02rem; color: var(--ink); padding: 0.72rem 0; border-bottom: 1px solid var(--line); }
.navpanel > a:not(.btn)[aria-current="page"] { color: var(--coral); }
.np-langs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.9rem 0 0.2rem; }
.np-langs a {
  text-decoration: none; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; background: var(--card);
}
.np-langs a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.np-cta { margin-top: 0.9rem; width: 100%; }

@media (max-width: 860px) {
  .nav-links .nav-hide { display: none; }
  .nav-in { gap: 0.8rem; }
  .nav-cta { display: none; }
  .burger { display: inline-flex; }
}

/* sélecteur de langue */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1.5px solid rgba(27, 23, 20, 0.14);
  border-radius: 999px; padding: 0.42rem 0.8rem; font: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.lang-btn:hover { border-color: var(--ink); color: var(--ink); }
/* ⚠️ Le globe DOIT être dimensionné : un SVG inline sans width/height n'a pas de taille
   intrinsèque et s'effondre à 0×0 dans un conteneur flex — il était invisible en EN et FR.
   ⚠️ nowrap : sans lui, « 日本語 » se casse caractère par caractère et le bouton devient
   une pastille verticale de 82 px de haut. */
.lang-btn { white-space: nowrap; line-height: 1.2; }
.lang-btn svg { width: 15px; height: 15px; flex: none; stroke-width: 2; }
.lang-menu a, .np-langs a { white-space: nowrap; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 0.35rem; min-width: 150px; display: none;
}
.lang[open] .lang-menu, .lang-menu.open { display: block; }
.lang-menu a { display: block; padding: 0.5rem 0.7rem; border-radius: var(--r-sm); text-decoration: none; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.lang-menu a:hover { background: var(--bg-deep); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--coral); }

/* ---------- motifs décoratifs ---------- */
.seigaiha {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cg fill='none' stroke='%230f8b82' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M0 40a30 30 0 0 1 60 0M60 40a30 30 0 0 1 60 0M-30 40a30 30 0 0 1 60 0'/%3E%3Cpath d='M10 40a20 20 0 0 1 40 0M70 40a20 20 0 0 1 40 0M-20 40a20 20 0 0 1 40 0'/%3E%3Cpath d='M20 40a10 10 0 0 1 20 0M80 40a10 10 0 0 1 20 0M-10 40a10 10 0 0 1 20 0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: bottom;
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(20px, 4vw, 48px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 420px at 82% 12%, rgba(238, 91, 67, 0.11), transparent 62%),
    radial-gradient(700px 380px at 4% 88%, rgba(15, 139, 130, 0.07), transparent 62%);
}
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.14fr 0.86fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 .accent { color: var(--coral); display: block; }
.hero .lede { margin-bottom: 1.8rem; }
.hero .btn-row { margin-bottom: 1.5rem; }
/* Une seule ligne de réassurance : « 9 langues : » suivi des 9 endonymes.
   Grille 2 colonnes (✓ | texte) et non flex : la liste passe à la ligne sur les colonnes
   étroites, et l'indentation suspendue garde le ✓ sur la première ligne au lieu de le
   centrer verticalement sur le bloc entier. */
.trust {
  display: grid; grid-template-columns: 15px 1fr; gap: 0.45rem; align-items: start;
  font-size: 0.9rem; color: var(--mute); font-weight: 600;
}
.trust svg { width: 15px; height: 15px; margin-top: 0.22em; stroke: var(--green); }
.trust b { display: block; font-weight: 700; color: var(--ink-soft); }

/* Les 9 langues sur leur PROPRE ligne. Avec le libellé devant, la ligne dépassait de peu
   la colonne et « Italiano » se retrouvait seul en 2e ligne, précédé d'un « · » orphelin.
   Sur sa ligne, la liste tient d'un bloc. */
.langs { display: block; margin-top: 0.16rem; font-weight: 500; text-wrap: balance; }
/* nowrap : un nom n'est jamais coupé en deux, et le séparateur reste soudé au nom qui
   le précède — un retour à la ligne ne peut donc pas démarrer par un « · ». */
.langs i { font-style: normal; white-space: nowrap; }
/* pas --line ici : c'est une couleur de bordure (#ece3d4), invisible en texte */
.langs i::after { content: " ·"; color: color-mix(in srgb, var(--mute) 55%, transparent); }
.langs i:last-child::after { content: none; }
/* Les idéogrammes remplissent tout le cadratin : à taille égale ils écrasent optiquement
   les noms en latin. Ce demi-point les réaligne visuellement. */
.langs i[lang="ja"], .langs i[lang="ko"], .langs i[lang^="zh"] { font-size: 0.94em; }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  /* ⚠️ NE PAS remettre `order: -1` sur .hero-art. Le visuel passait devant la copy :
     sur un écran de 390 px, le téléphone remplissait la totalité du premier écran et
     le titre n'apparaissait qu'après un scroll. On arrivait sur une capture d'écran
     sans savoir de quoi il s'agissait. La promesse d'abord, la preuve ensuite. */
}

/* téléphone */
.phone {
  position: relative; width: min(288px, 76vw); margin-inline: auto;
  border-radius: 38px; padding: 9px;
  background: linear-gradient(150deg, #342c26 0%, #16120f 42%, #241d18 100%);
  box-shadow: var(--shadow-lift), 0 0 0 1.5px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* halo derrière l'appareil : le sépare du fond crème sans ombre lourde */
.hero-art::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 128%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(238, 91, 67, 0.16), rgba(217, 150, 43, 0.09) 42%, transparent 66%);
  filter: blur(6px);
}
.phone::after {
  content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.25);
}
.phone img { border-radius: 30px; width: 100%; position: relative; }
.hero-art { position: relative; }
.hero-art .phone { position: relative; z-index: 1; }
.hero-art .float {
  position: absolute; z-index: 2; width: 92px; height: 92px; border-radius: 50%;
  box-shadow: 0 12px 30px rgba(58, 47, 32, 0.26), 0 0 0 5px rgba(255, 255, 255, 0.9);
  background: #fff; animation: bob 7s ease-in-out infinite;
}
/* les tampons flottants doivent mordre sur les BORDS du téléphone, jamais sur son texte */
.hero-art .f1 { top: -3%; left: -11%; width: 102px; height: 102px; animation-delay: -1s; }
.hero-art .f2 { bottom: 12%; left: -13%; width: 86px; height: 86px; animation-delay: -3.4s; }
.hero-art .f3 { top: 31%; right: -11%; width: 94px; height: 94px; animation-delay: -2.2s; }
.hero-art .f4 { bottom: -2%; right: -5%; width: 78px; height: 78px; animation-delay: -5s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-13px) rotate(3deg); } }
@media (max-width: 640px) { .hero-art .float { display: none; } }

/* ---------- bandeau de tampons ---------- */
.wall { padding-block: clamp(38px, 5vw, 62px); background: var(--bg-deep); border-block: 1px solid var(--line); overflow: hidden; }
.wall-head { text-align: center; margin-bottom: 1.9rem; }
.wall-head h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.wall-head p { color: var(--ink-soft); margin: 0.5rem 0 0; }
.marquee { display: flex; gap: 22px; width: max-content; animation: slide 62s linear infinite; }
.marquee.rev { animation-direction: reverse; margin-top: 22px; }
.marquee:hover { animation-play-state: paused; }
.marquee img { width: 96px; height: 96px; border-radius: 50%; background: #fff; box-shadow: 0 5px 15px rgba(58, 47, 32, 0.13); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wall-fade { position: relative; }
.wall-fade::before, .wall-fade::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 13%; z-index: 2; pointer-events: none;
}
.wall-fade::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
.wall-fade::after { right: 0; background: linear-gradient(270deg, var(--bg-deep), transparent); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.stat { background: var(--bg); padding: clamp(20px, 3vw, 32px) 1rem; text-align: center; }
.stat b { display: block; font-family: var(--serif); font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.stat span { display: block; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); }
.step { text-align: center; }
.step .shot { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line); background: #fff; margin-bottom: 1.4rem;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease); }
.step:hover .shot { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.step .shot img { width: 100%; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; font-size: 0.86rem; margin-bottom: 0.75rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

/* ---------- features ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card h3 { margin-bottom: 0.45rem; }
.card p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--coral-soft);
}
.ico svg { width: 21px; height: 21px; stroke: var(--coral); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.teal { background: var(--teal-soft); } .ico.teal svg { stroke: var(--teal); }
.ico.gold { background: var(--gold-soft); } .ico.gold svg { stroke: var(--gold); }

/* ---------- section passeport ---------- */
.split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split.rev > :first-child { order: 2; }
@media (max-width: 880px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }
.ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.85rem; }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ink-soft); font-size: 1rem; }
.ticks svg { flex: none; width: 20px; height: 20px; margin-top: 3px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ticks b { color: var(--ink); font-weight: 700; }

/* ---------- bandeau illustré ---------- */
/* La frise doit POSER sur le filet de la section suivante : padding en haut seulement.
   Avec du padding en bas, le sol de l'illustration flottait au-dessus de la ligne
   (26 px de padding + 7 px de marge transparente dans le fichier, désormais recadrée). */
.band { padding-block: clamp(10px, 3vw, 26px) 0; overflow: hidden; margin-bottom: -1px; }
/* `display: block` : sinon la ligne de base inline rajoute ~4 px sous l'image.
   `margin-bottom: -1px` sur le bloc : la hauteur rendue de la frise tombe sur un
   nombre FRACTIONNAIRE (233,09 px pour 259 px de source à l'échelle 0,9), et sur un
   écran à facteur de zoom (125 % sous Windows) l'arrondi laisse un liseré clair entre
   l'image et la section. Le -1px fait chevaucher : plus de couture possible, et le
   pixel masqué est du sol uni. */
.band img { display: block; }
.band img { width: 100%; max-width: 1600px; margin-inline: auto; }
@media (max-width: 700px) { .band img { width: 148%; max-width: none; margin-left: -24%; } }

/* ---------- packs ---------- */
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 20px); }
@media (max-width: 1000px) { .packs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .packs { grid-template-columns: repeat(2, 1fr); } }
.pack {
  position: relative; display: block; text-decoration: none; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1 / 1.24; box-shadow: var(--shadow-soft); border: 1px solid var(--line); background: var(--bg-deep);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pack:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.pack:hover img { transform: scale(1.06); }
.pack::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.2s ease;
}
.pack:hover::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.pack .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 15, 12, 0) 38%, rgba(20, 15, 12, 0.82) 100%); }
.pack .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 0.95rem; color: #fff; }
.pack .cat { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; display: block; margin-bottom: 0.28rem; }
.pack .name { font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; display: block; }
.pack .cnt { font-size: 0.8rem; opacity: 0.86; font-weight: 600; }
.pack .dot { position: absolute; top: 10px; left: 10px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.85); }

/* ---------- page /packs/ ---------- */
.packs-top { padding-bottom: clamp(18px, 3vw, 30px); }
.pstats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 760px; margin-inline: auto;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.pstats div { background: var(--bg); padding: 0.95rem 0.4rem; text-align: center; }
.pstats b { display: block; font-family: var(--serif); font-weight: 900; font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.1; }
.pstats span { display: block; margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 620px) { .pstats { grid-template-columns: repeat(2, 1fr); } }

/* barre de filtres collante */
.fbar {
  position: sticky; top: var(--nav-h); z-index: 40; background: rgba(250, 246, 239, 0.93);
  backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line); padding-block: 0.7rem;
}
.fchips {
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  /* la dernière puce doit pouvoir arriver au bord, sinon elle reste à moitié coupée */
  padding-right: 2px; scroll-behavior: smooth; cursor: grab;
}
.fchips.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.fchips .fchip { cursor: pointer; }
.fchips::-webkit-scrollbar { display: none; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.42rem 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fchip i { font-style: normal; font-size: 0.76rem; font-weight: 700; color: var(--mute); }
/* icône Feather de la catégorie (nom lu dans src/categories.js de l'app) */
.fchip svg {
  width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75;
}
.fchip.is-on svg { opacity: 1; }
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fchip.is-on i { color: rgba(255, 255, 255, 0.6); }

.packs-list { padding-top: clamp(20px, 3vw, 34px); }
.cat-block { padding: 0; }
.cat-block[hidden] { display: none; }
.cat-head { display: flex; align-items: baseline; gap: 0.8rem; margin: clamp(26px, 3.4vw, 42px) 0 1.1rem; }
.cat-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.cat-head span { font-size: 0.78rem; font-weight: 800; color: var(--mute); letter-spacing: 0.1em; text-transform: uppercase; }

/* Hauteurs égales (stretch, le défaut) : c'est ce qui aligne les bandes de couverture d'une
   fiche à l'autre et les rend comparables d'un coup d'œil. Ne pas repasser en align-items:start. */
.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 820px) { .pack-grid { grid-template-columns: 1fr; } }

/* encart offre (bas de /packs/) */
.offer-note {
  margin-top: clamp(34px, 4vw, 52px); background: var(--gold-soft); border: 1px solid #ecd9a8;
  border-radius: var(--r-xl); padding: clamp(22px, 3vw, 34px); text-align: center;
}
.offer-note h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: 0.5rem; }
.offer-note p { color: var(--ink-soft); max-width: 62ch; margin: 0 auto 1.4rem; font-size: 0.99rem; }
.offer-note .btn-row { justify-content: center; }

/* bandeau offre (section tarif de l'accueil) */
.offer-band {
  max-width: 860px; margin: 0 auto clamp(20px, 3vw, 30px); background: var(--gold-soft);
  border: 1px solid #ecd9a8; border-radius: var(--r-lg); padding: 1rem 1.3rem; text-align: center;
}
.offer-band b { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9a6a12; margin-bottom: 0.3rem; }
.offer-band p { margin: 0; font-size: 0.96rem; color: var(--ink-soft); }

/* ---------- premium ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 26px); max-width: 860px; margin-inline: auto; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px); }
.plan.hi { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-card); position: relative; }
.plan .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.28rem 0.85rem; border-radius: 999px; white-space: nowrap; }
.plan h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.plan .price { font-family: var(--serif); font-weight: 900; font-size: 1.5rem; color: var(--ink); margin-bottom: 1.2rem; letter-spacing: -0.02em; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.plan li { display: flex; gap: 0.6rem; font-size: 0.96rem; color: var(--ink-soft); }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 4px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan li.yes svg { stroke: var(--green); }
.plan li.cap svg { stroke: var(--mute); }
/* les deux cartes doivent démarrer leur liste à la même hauteur, quelle que soit la langue */
.plan .price { min-height: 3.3rem; } /* 2 lignes de 1.5rem : les listes restent alignées */
.plan.hi {
  background:
    linear-gradient(180deg, rgba(217, 150, 43, 0.07), rgba(217, 150, 43, 0) 42%),
    var(--card);
}
.plan-cta { margin-top: 1.5rem; }
.plan-cta .btn { width: 100%; }
.fineprint {
  margin: 1.7rem auto 0; max-width: 62ch; font-size: 0.88rem; color: var(--mute); text-align: center;
}

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 0.35rem 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative;
  font-weight: 700; font-size: 1.04rem; font-family: var(--serif); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px;
  border-right: 2.4px solid var(--coral); border-bottom: 2.4px solid var(--coral);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details p { color: var(--ink-soft); margin: 0 0 1.05rem; font-size: 0.99rem; max-width: 66ch; }

/* ---------- bandeau CTA ---------- */
.cta {
  background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px) var(--pad);
  text-align: center; position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(680px 340px at 50% -6%, rgba(238, 91, 67, 0.42), transparent 66%),
    radial-gradient(520px 300px at 4% 112%, rgba(15, 139, 130, 0.2), transparent 62%),
    radial-gradient(460px 280px at 96% 96%, rgba(217, 150, 43, 0.22), transparent 62%);
}
/* motif seigaiha doré en bas du bandeau sombre — le noir plat faisait « boîte » */
.cta-art {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cg fill='none' stroke='%23d9962b' stroke-opacity='.42' stroke-width='1.4'%3E%3Cpath d='M0 40a30 30 0 0 1 60 0M60 40a30 30 0 0 1 60 0M-30 40a30 30 0 0 1 60 0'/%3E%3Cpath d='M10 40a20 20 0 0 1 40 0M70 40a20 20 0 0 1 40 0M-20 40a20 20 0 0 1 40 0'/%3E%3Cpath d='M20 40a10 10 0 0 1 20 0M80 40a10 10 0 0 1 20 0M-10 40a10 10 0 0 1 20 0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
}
.cta > *:not(.cta-art) { position: relative; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.76); max-width: 50ch; margin: 0.9rem auto 1.8rem; }
.cta .btn-primary { background: #fff; color: var(--ink); }
.cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.cta .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding-block: clamp(34px, 4vw, 52px); }
/* Grille et non flex depuis le 2026-11-04 : le footer EN porte une 4e colonne
   (« Popular packs »), JA/FR n'en ont que 3. `auto-fit` COLLAPSE les pistes vides, donc
   la même règle rend 3 ou 4 colonnes selon la langue, sans classe par langue. */
.foot {
  display: grid; align-items: start; gap: 1.6rem 2.4rem;
  grid-template-columns: minmax(170px, 1.2fr) repeat(auto-fit, minmax(132px, 1fr));
}
@media (max-width: 880px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }
/* Pas de `nowrap` ici : « National parks in Japan » se faisait tronquer en 1 fr. Les
   ancres du footer sont des têtes SEO, elles doivent se lire en entier. */
.foot-packs a { line-height: 1.3; }
.foot-brand { max-width: 280px; }
.foot-brand p { font-size: 0.88rem; color: var(--mute); margin: 0.7rem 0 0; }
.foot nav { display: grid; gap: 0.55rem; }
.foot nav b { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 800; }
.foot nav a { text-decoration: none; font-size: 0.94rem; color: var(--ink-soft); font-weight: 600; }
.foot nav a:hover { color: var(--coral); }
.foot-btm { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; justify-content: space-between; font-size: 0.84rem; color: var(--mute); }
.foot-btm a { color: var(--mute); }

/* ---------- pages de contenu (privacy / support) ---------- */
.prose { max-width: 720px; margin-inline: auto; }
.prose h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 0.6rem; }
.prose .updated { color: var(--mute); font-size: 0.9rem; font-weight: 600; margin-bottom: 2.6rem; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 2.4rem 0 0.7rem; }
.prose h3 { margin: 1.7rem 0 0.4rem; font-size: 1.06rem; }
.prose p, .prose li { color: var(--ink-soft); font-size: 1rem; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.42rem; }
.prose a { color: var(--coral); font-weight: 600; }
.prose strong { color: var(--ink); }
.note { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--r-md); padding: 1.05rem 1.25rem; margin: 1.4rem 0; }
.note p:last-child { margin-bottom: 0; }

/* ---------- 404 & /q fallback ---------- */
.mini { min-height: 76vh; display: grid; place-items: center; text-align: center; padding-block: 60px; }
.mini .lost { width: min(430px, 82vw); margin: 0 auto 1.4rem; }
.mini h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin-bottom: 0.7rem; }
.mini p { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }
.q-photo { width: min(420px, 88vw); border-radius: var(--r-lg); box-shadow: var(--shadow-card); margin: 0 auto 1.7rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* lien d'évitement : invisible jusqu'au focus clavier */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.92rem;
  transition: top 0.18s ease;
}
.skip:focus-visible { top: 12px; }

/* ---------- barre d'action collée en bas (mobile) ---------- */
.dockbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  padding: 0.6rem var(--pad) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(250, 246, 239, 0.94);
  backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(58, 47, 32, 0.09);
  transform: translateY(115%); transition: transform 0.3s var(--ease);
}
.dockbar.show { transform: none; }
.dock-in { display: flex; align-items: center; gap: 0.8rem; max-width: var(--maxw); margin-inline: auto; }
.dock-in img { width: 38px; height: 38px; border-radius: 10px; flex: none; box-shadow: var(--shadow-soft); }
.dock-in > span { min-width: 0; display: grid; line-height: 1.25; }
.dock-in b { font-family: var(--serif); font-weight: 900; font-size: 0.98rem; letter-spacing: -0.02em; }
.dock-in i {
  font-style: normal; font-size: 0.74rem; color: var(--mute); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dock-in .btn { margin-left: auto; flex: none; padding: 0.62rem 1.05rem; font-size: 0.9rem; }
@media (max-width: 860px) {
  .dockbar { display: block; }
  /* le pied de page ne doit pas finir sous la barre */
  footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}