/* ═══════════════════════════════════════════════════════════════
   Landing — chrome marketing UNIQUEMENT. Tout est scopé sous .lp pour ne
   jamais polluer le Studio ni la scène. La démo de conversation n'utilise PAS
   ce fichier : elle réutilise le vrai composant 3D (_phone.html + skins.css +
   player.js), pour que la landing montre littéralement la sortie du produit.
   On réemploie les tokens --ds-* du design-system ; aucun second jeu de
   couleurs à maintenir.
   ═══════════════════════════════════════════════════════════════ */
.lp { --lp-green:#22C55E; --spring:cubic-bezier(.2,1.1,.3,1);
      display:flex;flex-direction:column;gap:4px;padding-bottom:40px }

/* ── hero ── */
.lp-hero{padding:40px 22px 6px;text-align:center}
.lp-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  color:var(--ds-ink2);background:var(--ds-card);border-radius:999px;padding:5px 11px;margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 0 0 .5px var(--ds-hair)}
.lp-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--lp-green)}
.lp-hero h1{font-size:33px;font-weight:700;letter-spacing:-.05em;line-height:1.06;
  background:linear-gradient(180deg,var(--ds-ink) 30%,var(--ds-ink2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lp-sub{font-size:14px;color:var(--ds-ink2);margin:10px auto 0;max-width:34ch;line-height:1.5}
.lp-sub b{color:var(--ds-ink);font-weight:600}

/* ── bandeau des deux sorties : c'est la promesse (mockup 3D d'abord) ── */
.lp-outputs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:16px 18px 4px}
.lp-out{display:inline-flex;align-items:center;gap:7px;background:var(--ds-card);border-radius:12px;
  padding:8px 12px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 0 0 .5px var(--ds-hair);font-size:12px}
.lp-out b{font-weight:600;letter-spacing:-.01em}
.lp-out span{color:var(--ds-ink3);font-size:11px}
.lp-out .sw{width:16px;height:16px;border-radius:5px;flex:none}
.lp-out .sw.d3{background:linear-gradient(135deg,#8A98A8,#5B6675)}
.lp-out .sw.key{background:var(--lp-green)}

/* ── démo : on réutilise le rig 3D réel, juste redimensionné pour la landing ── */
.lp-demo{display:flex;justify-content:center;padding:16px 0 6px;perspective:1200px}
.lp-demo .phonewrap{position:relative;inset:auto;width:244px;height:calc(244px / .462);
  background:transparent;perspective:1200px}
.lp-demo .phone3d{width:244px;height:calc(244px / .462);border-radius:34px;
  background:linear-gradient(145deg,#E8E8EA,#C9C9CE 45%,#F2F2F4 80%,#D6D6DA);
  box-shadow:0 30px 60px -16px rgba(0,0,0,.36),0 10px 22px -10px rgba(0,0,0,.26)}
.lp-demo .phone3d::before{inset:3px;border-radius:31px}
.lp-demo .screen3d{inset:6px;border-radius:28px}
.lp-demo .island3d{width:52px;height:15px;top:7px;border-radius:12px}

/* ── strip des skins ── */
.lp-skinstrip{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px 18px 2px}
.lp-skin{font-size:11px;font-weight:500;color:var(--ds-ink2);background:var(--ds-card);
  border-radius:999px;padding:6px 12px;box-shadow:0 0 0 .5px var(--ds-hair)}
.lp-skin b{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ── section modes ── */
.lp-sec{padding:26px 22px 4px}
.lp-sec h2{font-size:20px;font-weight:700;letter-spacing:-.035em;margin-bottom:4px}
.lp-sec>p{color:var(--ds-ink2);font-size:13px;margin-bottom:14px}
.lp-modecards{display:flex;flex-direction:column;gap:10px}
.lp-modecard{text-align:left;background:var(--ds-card);border-radius:var(--ds-rl);
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 0 0 .5px var(--ds-hair);padding:15px;
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  transition:transform 120ms var(--ds-ease),box-shadow 160ms}
.lp-modecard:active{transform:scale(.99)}
.lp-modecard .h{display:flex;align-items:center;gap:8px}
.lp-modecard .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:15px;flex:none}
.lp-modecard .ic.ai{background:rgba(0,113,227,.12)}
.lp-modecard .ic.libre{background:rgba(124,92,255,.12)}
.lp-modecard .t{font-size:15px;font-weight:600;letter-spacing:-.02em}
.lp-modecard .d{font-size:12.5px;color:var(--ds-ink2);line-height:1.45}
.lp-modecard .tag{font-size:10.5px;font-weight:600;color:var(--ds-ink3);
  text-transform:uppercase;letter-spacing:.04em}

/* ── CTA ── */
.lp-cta{padding:22px 22px 8px}
.lp-fine{font-size:11px;color:var(--ds-ink3);text-align:center;margin-top:10px;line-height:1.5}