/* ============ Performance : seuls transform et opacity bougent ============ */

/* Le fond qui change de couleur est un calque à part : on ne repeint plus toute la page */
body { background: var(--ivory); transition: none; }
.page-bg { position: fixed; inset: 0; z-index: -1; background-color: var(--page-bg, #f4efe4); transition: background-color 1.2s var(--ease-out); pointer-events: none; }

/* Apparitions sans flou (le flou animé coûte très cher) */
.js [data-rise] { filter: none !important; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.scene-text, .scene-text.is-active, .pack-line, .pack-line.is-on, .screen, .screen.is-active { filter: none !important; }
.pack-line { transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }

/* Plus de flou d'arrière-plan sur ce qui défile avec la page */
.nav.is-solid { background: rgba(244, 239, 228, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pill-glass, .hero-kicker, .trip-flag, .tabbar, .toast, .trip-map, .pack-meter, .wmap-chips button, .hs-card, .gauge, .viewer::backdrop {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.pill-glass { background: rgba(19, 33, 27, .35); }
.hero-kicker { background: rgba(19, 33, 27, .35); }
.trip-map { background: rgba(251, 248, 241, .96); }
.pack-meter { background: rgba(251, 248, 241, .96); }
.tabbar { background: #fffdf8; }
.hs-card { background: #fffdf8; }

/* Pas de fusion de calques en continu */
.phone-glare { mix-blend-mode: normal; opacity: .55; }
.join-bg { mix-blend-mode: normal; opacity: .3; filter: grayscale(1) sepia(.35) brightness(.8); }

/* Les halos qui pulsent : un anneau qui grandit (transform + opacité) au lieu d'une ombre redessinée */
.dot-live, .me-dot, .wme, .road-list .is-now .road-dot, .gem, .app-btn.pulse::after, .hs-dot { animation: none !important; }
@keyframes ripple { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
.dot-live { position: relative; }
/* .wme et .road-dot sont déjà positionnés en absolu : on ne touche pas à leur position */
.dot-live::before, .wme::before, .road-list .is-now .road-dot::before, .hs-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; pointer-events: none;
  animation: ripple 2.4s var(--ease-out) infinite; will-change: transform, opacity;
}
.dot-live { color: var(--amber); }
.wme { color: #3b82c4; }
.wme::before { inset: -3px; }
.road-list .is-now .road-dot { color: var(--amber); }
.hs-dot { color: rgba(255, 253, 248, .9); }
.pin-drop, .wpin { will-change: transform; }

/* Grain : rien sur téléphone, calque figé ailleurs */
@media (max-width: 900px) { .grain { display: none; } }

/* Le grand mot final se remplit par translation, sans repeindre le texte */
.finale { position: relative; }
.finale-word { background: none !important; -webkit-text-stroke: 1px rgba(244, 239, 228, .22); color: transparent; }
.finale-fill { position: absolute; inset: 0; overflow: hidden; transform: translateY(100%); will-change: transform; pointer-events: none; }
.finale-fill .finale-word { display: inline-block; color: var(--amber-hi); -webkit-text-stroke: 0; background: none; transform: translateY(-100%); will-change: transform;
  background-image: linear-gradient(0deg, var(--amber-hi), #f7e6bf) !important; -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-reduced-motion: reduce) { .dot-live::before, .wme::before, .road-list .is-now .road-dot::before, .hs-dot::before { animation: none; } }

/* L'histoire : plus de zoom lent en continu sur les grandes images */
.scene-clip.is-active img, .shot.is-on img { animation: none !important; }
.road-line i { will-change: transform; }
.phone { will-change: transform; }
.finale-fill .finale-word { background: none !important; color: var(--amber-hi) !important; -webkit-text-fill-color: var(--amber-hi); }
.hero-title em { display: block; }

/* Demain sur téléphone : les idées en pastilles au-dessus, l'explication sous l'écran */
.dm-caption { display: none; }
@media (max-width: 900px) {
  .dm-grid { display: flex; flex-direction: column; gap: 14px; }
  .dm-tabs { order: -2; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * clamp(20px, 4vw, 56px)); padding: 2px clamp(20px, 4vw, 56px) 6px; scrollbar-width: none; }
  .dm-tabs::-webkit-scrollbar { display: none; }
  .dm-tab { flex: none; width: auto; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(244, 239, 228, .07); scroll-snap-align: start; }
  .dm-tab > i { width: 32px; height: 32px; font-size: 1rem; }
  .dm-tab b { font-size: .9rem; white-space: nowrap; }
  .dm-tab small, .dm-tab.is-active small { display: none; }
  .dm-tab .dm-bar { left: 14px; right: 14px; bottom: 3px; }
  .dm-phone { order: -1; }
  .dm-caption { display: block; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(244, 239, 228, .08); text-align: left; }
  .dm-caption b { display: block; font-size: 1.02rem; font-weight: 500; color: var(--ivory); }
  .dm-caption p { margin-top: 4px; font-size: .88rem; line-height: 1.5; color: rgba(244, 239, 228, .78); }
  .dm-caption.is-new > * { animation: up .45s var(--ease-out) both; }
}
@media (max-width: 900px) { .dm-grid { align-items: stretch; } .dm-tabs { min-width: 0; max-width: none; } }
@media (max-width: 900px) { .bd-phone { width: 84px; right: 3%; left: auto; top: 30%; } }

/* Les ancres arrivent sous le menu, pas dessous */
main section[id] { scroll-margin-top: 72px; }