/* ============ LE COFFRE — accueil + sous-vues ============
   Univers clair (le fond sombre reste au Passeport).
   Vert = découverte, or = récompense, slate = structure.        */

#view-vault { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

.vk { --vk-green:#10b981; --vk-gold:#b8893a; }
.vk-screen { padding-top: 14px; }
.vk-hide { display:none !important; }

/* ---- En-tête éditorial ---- */
.vk-hero { display:grid; grid-template-columns: 1fr 158px; gap:10px; align-items:center; }
.vk-hero__eyebrow { font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#94a3b8; }
.vk-hero__title { font-family:'Gloock',serif; font-size:30px; line-height:1.06; color:#0f172a; margin:4px 0 0; }
.vk-hero__sub { font-size:13.5px; line-height:1.35; color:#64748b; margin:6px 0 0; }
.vk-hero__scope { color:#059669; font-weight:700; }
.vk-collage { position:relative; height:178px; }
.vk-collage::after {
  content:""; position:absolute; inset:-16px -12px -16px -8px; border-radius:44px; z-index:0;
  background:radial-gradient(60% 60% at 30% 30%, rgba(16,185,129,.16), transparent 70%),
             radial-gradient(60% 60% at 80% 70%, rgba(201,162,74,.18), transparent 72%);
}
.vk-collage__it {
  position:absolute; z-index:1; background-size:cover; background-position:center;
  background-color:#eef2f7; box-shadow:0 14px 30px -20px rgba(15,23,42,.65);
  border:2.5px solid #fff;
  transform:rotate(var(--rot,0deg));
  animation:vkCollageIn .9s cubic-bezier(.22,.8,.28,1) both, vkCollageFloat 7s ease-in-out 1s infinite;
  will-change:transform;
  transition:box-shadow .4s ease;
}
.vk-collage__it:nth-child(1) { left:0; top:24px; width:72px; height:108px; border-radius:30px 18px 28px 20px; --rot:-5deg; animation-delay:.05s, 1.1s; }
.vk-collage__it:nth-child(2) { left:48px; top:0; width:84px; height:138px; border-radius:26px 30px 20px 30px; z-index:2; --rot:0deg; animation-delay:.18s, 1.4s; animation-duration:1s, 8s; }
.vk-collage__it:nth-child(3) { right:0; top:52px; width:67px; height:104px; border-radius:20px 28px 18px 24px; --rot:4deg; animation-delay:.32s, 1.7s; animation-duration:1s, 7.4s; }
@keyframes vkCollageIn {
  from { opacity:0; transform:translateY(16px) rotate(calc(var(--rot,0deg) - 4deg)) scale(.94); }
  to   { opacity:1; transform:translateY(0) rotate(var(--rot,0deg)) scale(1); }
}
@keyframes vkCollageFloat {
  0%,100% { transform:translateY(0) rotate(var(--rot,0deg)); }
  50%     { transform:translateY(-5px) rotate(calc(var(--rot,0deg) + 1.2deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .vk-collage__it { animation:none; }
}

/* ---- Synthèse ---- */
.vk-synth {
  margin-top:8px; display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap;
}
.vk-synth__i { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#64748b; }
.vk-synth__i b { color:#0f172a; font-weight:800; }
.vk-synth__sep { color:#cbd5e1; }

/* ---- Recherche ---- */
.vk-search {
  margin-top:10px; height:52px; width:100%; border:1px solid #e5e7eb; border-radius:16px; background:#fff;
  display:flex; align-items:center; gap:10px; padding:0 14px; font-size:14px; color:#94a3b8; text-align:left;
}
.vk-search input { flex:1; border:none; outline:none; font-size:14px; color:#0f172a; background:transparent; min-width:0; }
.vk-search--active { border-color:rgba(16,185,129,.55); box-shadow:0 0 0 3px rgba(16,185,129,.10); }
.vk-search__clear { border:none; background:#f1f5f9; color:#64748b; width:26px; height:26px; border-radius:999px; font-size:14px; line-height:1; }

/* ---- Titres de section ---- */
.vk-sec-t { font-family:'Gloock',serif; font-size:19px; color:#0f172a; margin:14px 0 8px; }

/* ---- Collections ---- */
.vk-coll { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vk-coll__card {
  border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; background:#fff; text-align:left; padding:0;
  box-shadow:0 12px 26px -24px rgba(15,23,42,.6);
}
.vk-coll__card:active { transform:scale(.985); }
.vk-coll__pics { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; height:96px; gap:2px; background:#eef2f7; }
.vk-coll__pic { background-size:cover; background-position:center; background-color:#e2e8f0; }
.vk-coll__body { display:flex; align-items:center; gap:8px; padding:10px 12px; }
.vk-coll__txt { flex:1; min-width:0; }
.vk-coll__t { font-family:'Gloock',serif; font-size:15.5px; color:#0f172a; margin:0; }
.vk-coll__s { margin:2px 0 0; font-size:12px; color:#64748b; }
.vk-coll__s b { color:var(--vk-green); font-weight:800; }
.vk-coll__s.is-gold b { color:#e11d48; }
.vk-coll__go { width:26px; height:26px; border-radius:999px; background:#f1f5f9; color:#334155; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }

.vk-audio {
  margin-top:10px; position:relative; border-radius:22px; overflow:hidden; width:100%; text-align:left;
  min-height:118px; background:linear-gradient(135deg,#f6fbf7 0%,#eef7f1 100%); border:1px solid rgba(16,185,129,.35); padding:0; display:block;
  box-shadow:0 18px 38px -18px rgba(16,185,129,.22), inset 0 1px 0 rgba(255,255,255,.85);
}
.vk-audio__bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; transform:scale(1.04); filter:saturate(.8) sepia(.15); }
.vk-audio__grad { position:absolute; inset:0; background:linear-gradient(100deg,rgba(246,251,247,.96) 22%,rgba(246,251,247,.78) 52%,rgba(246,251,247,.35) 100%); }
.vk-audio__grad::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 88% 10%, rgba(16,185,129,.16), transparent 55%); }
.vk-audio__in { position:relative; display:flex; align-items:center; gap:13px; padding:18px 16px 26px; }
.vk-audio__t { font-family:'Gloock',serif; font-size:19px; letter-spacing:.2px; color:#14522d; margin:0; }
.vk-audio__s { margin:4px 0 0; font-size:12.5px; color:#059669; font-weight:700; letter-spacing:.1px; }
.vk-audio__s i { font-style:normal; color:#64748b; font-weight:500; }
.vk-audio__play {
  margin-left:auto; width:56px; height:56px; border-radius:999px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.8); color:#064e3b; font-size:15px; line-height:1; text-indent:3px;
  background:linear-gradient(135deg,#a7f3d0,#34d399 55%,#10b981);
  box-shadow:0 10px 24px -8px rgba(16,185,129,.55), 0 0 0 6px rgba(16,185,129,.12), inset 0 1px 0 rgba(255,255,255,.65);
}
.vk-wave { position:absolute; left:0; right:0; bottom:9px; height:22px; display:flex; align-items:flex-end; gap:2.5px; padding:0 16px; opacity:.85; }
.vk-wave i { flex:1; background:linear-gradient(180deg,#10b981,#34d399 55%,rgba(52,211,153,.25)); border-radius:2px; transform-origin:bottom; animation:vkWave 1.2s ease-in-out infinite both; }
@keyframes vkWave {
  0%,100% { transform:scaleY(.35); opacity:.55; }
  50% { transform:scaleY(1); opacity:1; }
}

/* ---- À reprendre ---- */
.vk-resume { border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:10px; display:flex; align-items:center; gap:11px; width:100%; text-align:left; }
.vk-resume__pic { width:78px; height:56px; border-radius:11px; background-size:cover; background-position:center; background-color:#e2e8f0; flex:none; }
.vk-resume__t { font-family:'Gloock',serif; font-size:16px; color:#0f172a; margin:0; }
.vk-resume__s { margin:2px 0 6px; font-size:12px; color:#64748b; }
.vk-resume__bar { height:4px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.vk-resume__bar i { display:block; height:100%; background:var(--vk-green); }
.vk-resume__play { width:38px; height:38px; border-radius:999px; border:1.5px solid rgba(16,185,129,.7); color:#047857; background:#fff; flex:none; font-size:13px; }

/* ---- Récompenses ---- */
.vk-reward {
  border:1px solid rgba(201,162,74,.42); border-radius:20px; background:linear-gradient(180deg,#fffdf6,#fff);
  padding:14px; display:flex; align-items:center; gap:10px; width:100%; text-align:left; overflow:hidden;
}
.vk-reward__seal { width:40px; height:40px; border-radius:13px; border:1px solid rgba(201,162,74,.45); background:#fffdf6; color:var(--vk-gold); display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.vk-reward__t { font-family:'Gloock',serif; font-size:18px; color:#0f172a; margin:0; }
.vk-reward__s { margin:2px 0 0; font-size:12.5px; color:var(--vk-gold); font-weight:700; }
.vk-reward__cta { margin:10px 0 0; font-size:12.5px; font-weight:800; color:#047857; }
.vk-reward__prev { position:relative; width:118px; height:104px; flex:none; }
.vk-reward__prev .mcard-tile { position:absolute; width:76px; height:100px; }
.vk-reward__prev .mcard-tile:nth-child(1) { left:0; top:2px; transform:rotate(-5deg); }
.vk-reward__prev .mcard-tile:nth-child(2) { right:0; top:0; transform:rotate(4deg); }

/* ---- En-tête des sous-vues ---- */
.vk-head { display:flex; align-items:center; gap:12px; }
.vk-head__back { width:38px; height:38px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#0f172a; font-size:16px; flex:none; }
.vk-head__t { font-family:'Gloock',serif; font-size:25px; color:#0f172a; margin:0; flex:1; min-width:0; }
.vk-head__n { font-size:12.5px; color:#64748b; flex:none; }
.vk-head__eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--vk-gold); margin:0 0 6px; }

/* ---- Chips ---- */
.vk-chips { display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:2px; }
.vk-chips::-webkit-scrollbar { display:none; }
.vk-chip {
  flex:none; border-radius:999px; border:1px solid #e2e8f0; background:#fff; color:#475569;
  font-size:12.5px; font-weight:700; padding:9px 14px; white-space:nowrap;
}
.vk-chip.is-on { background:#0f172a; border-color:#0f172a; color:#fff; }
.vk-chip--green.is-on { background:var(--vk-green); border-color:var(--vk-green); }

/* Chips territoire (France / Région / Ville) */
.vk-chips--territory { margin-top:12px; }
.vk-chip--territory { border-color:#e2e8f0; background:#fff; color:#475569; }
.vk-chip--territory .vk-chip__val { color:#64748b; font-weight:800; font-variant-numeric:tabular-nums; margin-left:4px; }
.vk-chip--territory.is-on { background:linear-gradient(135deg,#0f172a,#1e293b); border-color:#0f172a; color:#fff; }
.vk-chip--territory.is-on .vk-chip__val { color:#34d399; }

/* ---- Grille lieux ---- */
.vk-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.vk-pcard { position:relative; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; background:#fff; text-align:left; padding:0; }
.vk-pcard:active { transform:scale(.985); }
.vk-pcard__pic { height:118px; background-size:cover; background-position:center; background-color:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:34px; }
.vk-pcard__b { padding:10px 11px 12px; }
.vk-pcard__t { font-family:'Gloock',serif; font-size:16px; line-height:1.15; color:#0f172a; margin:0; }
.vk-pcard__s { margin:3px 0 0; font-size:12px; color:#64748b; }
.vk-pcard__audio { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:11.5px; font-weight:700; padding:5px 9px; border-radius:999px; background:#ecfdf5; color:#047857; }
.vk-pcard__audio--done { background:#f1f5f9; color:#64748b; }

/* ---- Cœur ---- */
.vk-heart {
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:999px; border:none;
  background:rgba(255,255,255,.92); color:#94a3b8; font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -8px rgba(15,23,42,.6); z-index:3;
}
.vk-heart.is-on { background:var(--vk-green); color:#fff; }
.vk-heart--flat { position:static; box-shadow:none; background:#f8fafc; }
.vk-heart--flat.is-on { background:var(--vk-green); color:#fff; }

/* ---- Lignes (favoris, audios, recherche) ---- */
.vk-rows { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.vk-row { display:flex; align-items:center; gap:11px; border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:10px; width:100%; text-align:left; }
.vk-row__pic { width:76px; height:64px; border-radius:11px; background-size:cover; background-position:center; background-color:#e2e8f0; flex:none; display:flex; align-items:center; justify-content:center; font-size:24px; }
.vk-row__c { flex:1; min-width:0; }
.vk-row__t { font-family:'Gloock',serif; font-size:16px; line-height:1.2; color:#0f172a; margin:0; }
.vk-row__s { margin:3px 0 0; font-size:12px; color:#64748b; }
.vk-row__s--green { color:#047857; }
.vk-row__s--gold { color:var(--vk-gold); }
.vk-row__go { color:#cbd5e1; font-size:16px; flex:none; }
.vk-row__acts { display:flex; align-items:center; gap:8px; flex:none; }
.vk-row__bar { height:3px; border-radius:999px; background:#eef2f7; overflow:hidden; margin-top:7px; }
.vk-row__bar i { display:block; height:100%; background:var(--vk-green); }
.vk-row__play { width:34px; height:34px; border-radius:999px; border:1.5px solid rgba(16,185,129,.6); color:#047857; background:#fff; font-size:12px; flex:none; }

.vk-group-t { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#94a3b8; margin:16px 0 8px; }
.vk-mark { background:#d1fae5; border-radius:4px; padding:0 2px; }

/* ---- Cartes Mosaïque ---- */
.vk-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.vk-cardwrap { position:relative; border:1px solid rgba(201,162,74,.45); border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 6px 18px rgba(120,90,20,.08); }
.vk-cardwrap .mcard-tile { display:block; width:100%; height:auto; aspect-ratio:3/4; border-radius:0; border:0; }
.vk-cardwrap__b { padding:8px 11px 10px; }
.vk-cardwrap__t { font-family:'Gloock',serif; font-size:16px; line-height:1.15; margin:0; color:#0f172a; }
.vk-cardwrap__r { margin:3px 0 0; font-size:12px; color:#047857; font-weight:700; }
.vk-cardwrap__p { margin:8px 0 0; padding-top:8px; border-top:1px solid #f1f5f9; font-size:12px; color:var(--vk-gold); }
.vk-cardwrap__p--solo { margin:0; padding-top:0; border-top:0; }
.vk-row__pic--card { background:linear-gradient(145deg,#4a3a16,#241c0d); border:1px solid rgba(201,162,74,.5); color:#e9c96f; }
.vk-serie { margin-top:14px; border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:12px; }
.vk-serie__t { font-family:'Gloock',serif; font-size:16px; margin:0; color:#0f172a; }
.vk-serie__s { margin:2px 0 8px; font-size:12px; color:#64748b; }
.vk-serie__bar { height:5px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.vk-serie__bar i { display:block; height:100%; background:var(--vk-green); }
.vk-note { margin-top:12px; font-size:12px; color:#94a3b8; display:flex; gap:7px; align-items:flex-start; }

/* ---- États ---- */
.vk-empty { text-align:center; color:#64748b; font-size:13.5px; padding:34px 10px; }
.vk-empty b { display:block; font-family:'Gloock',serif; font-size:18px; color:#0f172a; margin-bottom:6px; font-weight:400; }
.vk-skel { border-radius:16px; background:linear-gradient(90deg,#f1f5f9,#e7edf5,#f1f5f9); background-size:200% 100%; animation:vkShine 1.2s linear infinite; }
@keyframes vkShine { from { background-position:200% 0; } to { background-position:-200% 0; } }