/* Vantage RP — démos en direct de l'accueil (04/11/2026). Blocs .live pilotés par live.js. Règles : DESIGN.md.
   Accueil façon vitrine produit (lbscripts.com, demande utilisateur) : le vrai téléphone dans le héros, puis une rangée
   par fonction (texte d'un côté, démo de l'autre, en alternance ; une colonne sous 1068 px).
   Souris : la démo s'utilise sur place. Écran tactile : aperçu vivant (la page défile normalement), un toucher l'ouvre
   en plein écran, « Terminé » la referme. Pas de color-scheme sur les cadres : s'il diffère de celui de la page
   intégrée, Chrome peint un fond blanc opaque. Aucun ancêtre d'un .live ne doit créer de contexte (transform, filter,
   z-index) : le plein écran passe par position: fixed. */

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero.hero-live { text-align: left; padding: 1.5rem var(--gutter) 0; }
.hero-live .hero-in { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". dev" "txt dev" "doors dev" ". dev"; column-gap: 5rem; min-height: calc(100svh - 4rem); }
.hero-live .hero-txt { grid-area: txt; }
.hero-live .hero-doors { grid-area: doors; }
.hero-live .hero-dev { grid-area: dev; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; padding: 1.5rem 0 2rem; }
.hero-live .island { margin-bottom: 1.75rem; }
.hero-live .display { font-size: clamp(3rem, 5.6vw, 5.5rem); }
.hero-live .lede { margin: 1.125rem 0 0; }
.hero-live .doors { margin: 2.25rem 0 0; max-width: 42rem; }
.hero-live .hero-doors .ctas { margin-top: 1rem; justify-content: flex-start; }
.hero-live .scene { position: absolute; inset: -2rem -8rem; margin: 0; padding: 0; pointer-events: none; }
.hero-live .scene .fade { background: radial-gradient(55% 60% at 50% 50%, transparent 25%, var(--bg) 78%); }
.hero-live .hero-dev .live { position: relative; }
.if-touch { display: none; }

/* ── Rangées : texte / démo en alternance ──────────────────────────────── */
.lrow { padding: 9rem 0 0; }
.lrow-in { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 4.5rem; align-items: center; }
.lrow.flip .lrow-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.lrow.flip .lrow-txt { order: 2; }
.lrow-txt .h2 { margin-top: .5rem; }
.lrow-txt .p { margin-top: 1.125rem; max-width: 32rem; }
.lrow-dev { min-width: 0; display: flex; justify-content: center; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; }
.tags li { font-size: .8125rem; font-weight: 500; color: var(--text-2); background: var(--tile); border-radius: .625rem; padding: .375rem .75rem; }
#essayer, .lrow { scroll-margin-top: 4.5rem; }

@media (max-width: 1068px) {
  .hero.hero-live { text-align: center; padding-top: 2.5rem; }
  .hero-live .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "txt" "dev" "doors"; min-height: 0; }
  .hero-live .lede { margin: 1.125rem auto 0; }
  .hero-live .doors { margin: 1.5rem auto 0; }
  .hero-live .hero-doors .ctas { justify-content: center; }
  .hero-live .hero-dev { padding: 2rem 0 0; }
  .hero-live .scene { inset: 0 calc(-1 * var(--gutter)); }
  .lrow { padding-top: 7rem; }
  .lrow-in, .lrow.flip .lrow-in { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; text-align: center; }
  .lrow.flip .lrow-txt { order: 0; }
  .lrow-txt .p { margin-left: auto; margin-right: auto; }
  .tags { justify-content: center; }
}
@media (max-width: 734px) {
  .hero-live .island { margin-bottom: 1.25rem; }
  .hero-live .display { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .lrow { padding-top: 5.5rem; }
}

/* ── Bloc de démo ──────────────────────────────────────────────────────── */
.live { display: flex; flex-direction: column; align-items: center; width: 100%; }
.live-box { position: relative; overflow: hidden; max-width: 100%; border-radius: 1.5rem; background: var(--tile, #111014); isolation: isolate; }
.live[data-kind="device"] .live-box { background: transparent; }
.live-box iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; background: transparent; transition: opacity 500ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.live.is-ready .live-box iframe { opacity: 1; }
.live-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity 500ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.live.is-ready .live-poster { opacity: 0; }
.live-skel { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--tile, #111014); transition: opacity 500ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.live.is-ready .live-skel { opacity: 0; }
.live-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: .5rem .875rem; border-radius: 980px; background: rgba(17,16,20,.86); color: var(--text-2, #D2D2D7); font-size: .875rem; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.live-status[hidden] { display: none; }
.live-note { margin: 0; color: var(--muted, #86868B); font-size: .8125rem; text-align: center; position: relative; }

/* Écran tactile : tout l'aperçu est un bouton (le doigt fait défiler la page, un toucher ouvre le plein écran) */
.live-shield { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.live-go { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.125rem; border-radius: 980px; background: var(--violet, #8B5CF6); color: #fff; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.5); transition: transform 160ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.live-go svg { width: 1rem; height: 1rem; }
.live-shield:active .live-go { transform: scale(.97); }
.live:not(.is-ready) .live-go { visibility: hidden; }
.live.is-full .live-shield { display: none; }
.no-touch .live-shield { display: none; }

/* Plein écran (écran tactile) : le bloc passe en position fixe au-dessus d'un fond noir */
html.live-lock, html.live-lock body { overflow: hidden; }
.live-sheet { position: fixed; inset: 0; z-index: 1000; background: #000; }
.live-close { position: fixed; z-index: 1002; top: calc(env(safe-area-inset-top, 0px) + .75rem); right: calc(env(safe-area-inset-right, 0px) + .75rem); min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: 980px; background: var(--tile-2, #1C1B20); color: var(--text, #F5F5F7); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 160ms var(--ease-out, cubic-bezier(.23,1,.32,1)); }
.live-close:active { transform: scale(.97); }
.live-hint { position: fixed; z-index: 1002; top: calc(env(safe-area-inset-top, 0px) + .75rem); left: calc(env(safe-area-inset-left, 0px) + 1rem); max-width: calc(100% - 9.5rem); min-height: 2.75rem; display: flex; align-items: center; margin: 0; color: var(--muted, #86868B); font-size: .8125rem; line-height: 1.3; }
.live-sheet[hidden], .live-close[hidden], .live-hint[hidden] { display: none; }
.live.is-full .live-box { position: fixed; z-index: 1001; max-width: none; }

@media (pointer: coarse) {
  .if-fine { display: none; }
  .if-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .live-box iframe, .live-poster, .live-skel, .live-go, .live-close { transition: none; }
}