/* ============================================================================
   IDN Badge Engine — Musée personnel / Ligne de vie (v4.24.71)
   La collection devient un musée : timeline verticale, jalons d'année or,
   médaillons ADN sur la ligne, cartes élevées (tilt via badge-tile.css).
   Dépend de design-tokens.css (--mt-*). Namespacé .idn-musee / .idn-view-*.
   ========================================================================== */

/* ── Bascule Grille / Ligne de vie ── */
.idn-view-toggle{display:inline-flex;gap:4px;background:var(--mt-surface);border:1px solid var(--mt-border);border-radius:var(--mt-r-pill);padding:4px;margin:0 0 18px;box-shadow:var(--mt-sh-1)}
.idn-vt-btn{border:0;background:transparent;padding:8px 16px;border-radius:var(--mt-r-pill);font-size:13px;font-weight:700;color:var(--mt-text-muted);cursor:pointer;transition:all var(--mt-dur) var(--mt-ease-out)}
.idn-vt-btn.is-active{background:var(--mt-grad-brand);color:#fff;box-shadow:var(--mt-sh-glow)}
.idn-vt-btn:focus-visible{outline:2px solid var(--mt-primary);outline-offset:2px}

/* ── Scène du musée ── */
.idn-musee{position:relative;padding:8px 0 40px;max-width:860px;margin:0 auto}
.musee-line{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:var(--mt-grad-brand);border-radius:2px;opacity:.35}

/* Jalon d'année (or) */
.musee-year{position:relative;display:flex;justify-content:center;margin:26px 0 18px;z-index:2}
.musee-year span{background:var(--mt-grad-gold);color:#3a2c08;font-weight:900;font-size:13px;letter-spacing:1px;padding:6px 18px;border-radius:var(--mt-r-pill);box-shadow:var(--mt-sh-gold)}

/* Entrées alternées gauche/droite */
.musee-item{position:relative;width:50%;padding:0 44px 26px 0;z-index:1}
.musee-item.is-right{margin-left:50%;padding:0 0 26px 44px}

/* Médaillon ADN sur la ligne */
.musee-node{position:absolute;top:6px;right:-23px;width:46px;height:46px;border-radius:50%;
  background:var(--node,var(--mt-primary));display:grid;place-items:center;border:3px solid #fff;
  box-shadow:0 0 0 3px rgba(99,102,241,.22),var(--mt-sh-2);overflow:hidden;z-index:3}
.musee-item.is-right .musee-node{right:auto;left:-23px}
.musee-node svg{width:38px;height:38px}
.musee-node span{font-size:20px;line-height:1}

/* Carte */
.musee-card{position:relative;background:var(--mt-surface);border:1px solid var(--mt-border);border-radius:var(--mt-r-lg);padding:16px 18px;box-shadow:var(--mt-sh-2)}
.musee-card .idn-stamp{position:static;display:inline-flex;margin:0 0 10px}
.musee-emoji{font-size:30px;line-height:1;margin-bottom:8px}
.musee-name{margin:0 0 4px;font-size:15.5px;font-weight:800;color:var(--mt-text)}
.musee-meta{font-size:12px;color:var(--mt-text-muted);margin-bottom:10px}
.musee-verify{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mt-primary);text-decoration:none;padding:6px 12px;border:1px solid var(--mt-primary);border-radius:var(--mt-r-pill);transition:all var(--mt-dur) var(--mt-ease-out)}
.musee-verify:hover{background:var(--mt-primary);color:#fff}

/* Révélation en cascade (rejouée à chaque bascule) */
.idn-musee:not([hidden]) .musee-item{opacity:0;animation:museeIn .55s var(--mt-ease-out) forwards;animation-delay:calc(var(--i,0) * 70ms)}
.idn-musee:not([hidden]) .musee-year{opacity:0;animation:museeIn .5s var(--mt-ease-out) forwards}
@keyframes museeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Mobile : ligne à gauche, tout empilé */
@media(max-width:680px){
  .musee-line{left:20px}
  .musee-item,.musee-item.is-right{width:100%;margin-left:0;padding:0 0 24px 56px}
  .musee-node,.musee-item.is-right .musee-node{left:-2px;right:auto;width:42px;height:42px}
  .musee-node svg{width:34px;height:34px}
  .musee-year{justify-content:flex-start;padding-left:56px}
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .idn-musee:not([hidden]) .musee-item,.idn-musee:not([hidden]) .musee-year{opacity:1;animation:none}
  .idn-vt-btn{transition:none}
}