/* ═══════════════════════════════════════════════════════════
   INITIAL SOLUTIONS — Animation signature du hero (fenêtre de
   navigateur, vue éclatée au scroll). Chargé uniquement par
   index.php, en complément de styles.css et home.css.
   Contenu : capture réelle du site Boostngo (portfolio client).
   ═══════════════════════════════════════════════════════════ */

.hero-visual { position: relative; }
.hw-scene { position: relative; width: 100%; }

/* ── Fenêtre de navigateur ── */
.hw-window { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); box-shadow: var(--shadow-md); }

.hw-chrome { display: flex; align-items: center; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--border); border-radius: var(--rl) var(--rl) 0 0; background: var(--bg); }
.hw-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 5px; }
.hw-dot-r { background: #C9847A; }
.hw-dot-a { background: #D8BA7C; }
.hw-dot-g { background: #93AC8F; }
.hw-url { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 3px 12px; }
.hw-url svg { width: 10px; height: 10px; color: var(--faint); flex-shrink: 0; }

/* ── Scène 3D ── */
.hw-stage { position: relative; width: 100%; aspect-ratio: 1902 / 912; overflow: hidden; border-radius: 0 0 var(--rl) var(--rl); perspective: 1400px; }
.hw-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.hw-tile { position: absolute; overflow: hidden; background-image: url('/images/portfolio-boostngo.webp'); background-repeat: no-repeat; will-change: transform; backface-visibility: hidden; }
.hw-nav   { left: 0;      top: 0;      width: 100%;   height: 11.84%; background-size: 100% 844.44%;    background-position: 0% 0%; }
.hw-text  { left: 0;      top: 11.84%; width: 54.94%; height: 74.78%; background-size: 182.01% 133.72%; background-position: 0% 46.96%; }
.hw-cta   { left: 0;      top: 86.62%; width: 54.94%; height: 13.38%; background-size: 182.01% 747.54%; background-position: 0% 100%; }
.hw-photo { left: 54.94%; top: 11.84%; width: 45.06%; height: 88.16%; background-size: 221.94% 113.43%; background-position: 100% 100%; }

/* ── Labels discrets (visibles uniquement au pic de l'éclatement) ── */
.hw-label { position: absolute; opacity: 0; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 4px 11px; white-space: nowrap; pointer-events: none; will-change: transform, opacity; }
.hw-label-1 { left: 3%;  top: 4%; }
.hw-label-2 { right: 2%; top: 2%; }
.hw-label-3 { right: 3%; top: 46%; }
.hw-label-4 { left: 3%;  top: 62%; }
.hw-label-5 { left: 28%; bottom: 3%; }

/* ── Trio responsive (fin de séquence, desktop uniquement) ── */
.hw-tablet, .hw-phone { position: absolute; top: 50%; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; opacity: 0; transform: translateY(-50%) scale(.85); pointer-events: none; }
.hw-tablet { right: 8%; width: 24%; aspect-ratio: 3 / 4; z-index: 1; }
.hw-phone  { right: -3%; width: 14%; aspect-ratio: 9 / 18; z-index: 2; }
.hw-mini-nav   { height: 14%; background-image: url('/images/portfolio-boostngo.webp'); background-repeat: no-repeat; background-size: 100% 844.44%; background-position: 0% 0%; border-bottom: 1px solid var(--border); }
.hw-mini-photo { height: 86%; background-image: url('/images/portfolio-boostngo.webp'); background-repeat: no-repeat; background-size: 221.94% 113.43%; background-position: 100% 100%; }

/* ── Repos / dégradation gracieuse (pas de JS, ou reduced-motion) ── */
@media (prefers-reduced-motion: reduce) {
  .hw-inner, .hw-tile, .hw-label, .hw-desktop, .hw-tablet, .hw-phone { transition: none !important; animation: none !important; }
}

@media (max-width: 959px) {
  .hw-chrome { height: 30px; }
  .hw-tablet, .hw-phone { display: none; }
}
@media (max-width: 639px) {
  .hw-label { font-size: 10px; padding: 3px 9px; }
}