/* =============================================================
   Hero Play!t : démonstration animée (Word → dialogue Play!t → taille,
   lien, titre, QR code → insertion → scan sur téléphone).
   Repère de la scène = capture Word 1366 × 768 ; toutes les positions
   sont en % de cette capture. Images dans /assets/playit/ (anglais).
   ============================================================= */
.pl-body { padding: 0; background: #fff; }
.pl-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; user-select: none; }
@media (max-width: 640px) { .pl-stage { aspect-ratio: 4 / 3; } }

.pl-cam { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1366 / 768; transform-origin: 0 0; container-type: inline-size; }
.pl-cam > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-cv { position: absolute; left: 34.26%; top: 36.98%; width: 30.46%; height: 30.73%; background: #fff; }
.pl-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .10); opacity: 0; }
.pl-dlg { position: absolute; inset: 0; opacity: 0; }
.pl-box { position: absolute; left: 9.736%; top: 15.17%; width: 80.53%; aspect-ratio: 1258 / 713; background: #fff; box-shadow: 0 1.4cqw 5cqw rgba(0, 0, 0, .4); }
.pl-box img, .pl-box .pl-bar { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-box img.pl-l { opacity: 0; }
.pl-fbg { position: absolute; left: .87%; top: 10.4%; width: 98.3%; height: 3.9%; background: #fff; border: .12cqw solid #f26a3d; border-radius: .3cqw; opacity: 0; }
.pl-tb { position: absolute; left: .5%; top: .3%; width: 56%; height: 3.2%; background: #fff; }
.pl-box .pl-bar { top: auto; height: 10.8%; bottom: 0; background: url(/assets/playit/dlg-url.webp) 0 100% / 100% auto no-repeat; opacity: 0; }
.pl-ring { position: absolute; border: .22cqw solid var(--color-accent, #ff6b35); border-radius: .5cqw; box-shadow: 0 0 0 .15cqw rgba(255, 255, 255, .7), 0 0 1.4cqw rgba(255, 107, 53, .6); opacity: 0; pointer-events: none; }

.pl-phone { position: absolute; left: 68.1%; top: 36.5%; width: 13.9%; height: 46.9%; padding: .55cqw; border-radius: 1.6cqw; background: #101418; box-shadow: 0 1.4cqw 3.5cqw rgba(0, 0, 0, .35); opacity: 0; }
.pl-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1.2cqw; background: linear-gradient(160deg, #2b333b, #12171c); }
.pl-find { position: absolute; left: 14%; top: 32%; width: 72%; aspect-ratio: 1; border-radius: .6cqw; border: .25cqw solid #fff; border-color: #fff #fff transparent transparent; opacity: 0; }
.pl-scan { position: absolute; left: 12%; top: 24%; width: 76%; height: .35cqw; background: var(--color-accent, #ff6b35); box-shadow: 0 0 1.2cqw var(--color-accent, #ff6b35); opacity: 0; }
.pl-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.pl-video { position: absolute; inset: 0; background: #fff; opacity: 0; }
.pl-vimg { position: relative; width: 100%; aspect-ratio: 480 / 204; margin-top: 14%; background: url(/assets/playit/dlg-url.webp) 15.55% 45.8% / 262.1% auto no-repeat; }
.pl-vimg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw 0 0 -1.3cqw; border-radius: 50%;
  background: rgba(0, 0, 0, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l9 6-9 6z' fill='%23fff'/%3E%3C/svg%3E") center / 60% no-repeat; }
.pl-vl { height: .7cqw; margin: 1.2cqw 8% 0; border-radius: .4cqw; background: #dfe3e8; }
.pl-vl.pl-s { width: 55%; }
.pl-conn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-conn path { fill: none; stroke: var(--color-accent, #ff6b35); stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; }
.pl-rip { position: absolute; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; border: .35cqw solid var(--color-accent, #ff6b35); opacity: 0; z-index: 4; }
.pl-cursor { position: absolute; width: 15px; height: 15px; margin: -1.3px 0 0 -1.9px; transform: scale(var(--inv, 1)); transform-origin: 1.9px 1.3px; z-index: 5; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }
.pl-cursor svg { display: block; width: 100%; height: 100%; transform-origin: 1.9px 1.3px; }

/* Étapes cliquables, légende, commandes */
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.pl-chip {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--text-primary);
  transition: background-color .2s, color .2s, border-color .2s;
}
.pl-chip:hover { border-color: var(--color-accent, #ff6b35); }
.pl-chip[aria-pressed="true"] { background: var(--color-accent, #ff6b35); border-color: var(--color-accent, #ff6b35); color: #fff; }
.pl-chip:focus-visible, .pl-ctrl button:focus-visible { outline: 2px solid var(--color-accent, #ff6b35); outline-offset: 2px; }
.pl-caption { min-height: 3em; margin: 10px 4px 0; text-align: center; font-size: 13px; color: var(--text-secondary); }
.pl-caption p[hidden] { display: none; }
.pl-ctrl { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.pl-ctrl button {
  font: inherit; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-border); background: transparent; color: var(--text-secondary);
}
.pl-ctrl button:hover { color: var(--text-primary); border-color: var(--color-accent, #ff6b35); }
.pl-ctrl [hidden] { display: none; }
.pl-credit { margin-top: 12px; text-align: center; font-size: 11px; color: var(--text-muted); }

/* Page Play!t (bureau) : la démonstration prend plus de place que le texte */
@media (min-width: 993px) {
  .product-hero.product-hero-anim .hero-container { grid-template-columns: 0.8fr 1.2fr; gap: 40px; }
}