/* NStreamPro — page de présentation et de téléchargement */
.app-page { background: radial-gradient(1200px 600px at 75% -10%, rgba(229,72,77,.18), transparent 60%), var(--bg); }
.ap-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 14px 4vw;
  background: rgba(11,13,18,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.05); }
.ap-top .logo { text-decoration: none; }
.ap-top nav { display: flex; gap: 18px; margin-left: auto; }
.ap-top nav a { color: var(--muted); font-weight: 500; }
.ap-top nav a:hover { color: var(--text); }
.btn.big { padding: 13px 26px; font-size: 16px; }

.ap-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 70px 4vw 50px; max-width: 1240px; margin: 0 auto; }
.ap-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: -1.5px; margin: 0 0 18px; }
.ap-hero p { color: #c9cfdb; font-size: 18px; line-height: 1.6; max-width: 600px; }
.ap-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; }

/* appareils dessinés en CSS */
.ap-devices { position: relative; height: 340px; }
.dev .scr { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2a1e3d, #151922 55%, #3a1620);
  border-radius: 10px; height: 100%; font-weight: 800; color: #fff; }
.dev .scr span { font-size: 42px; color: var(--accent); }
.dev .scr b { color: #fff; }
.dev .scr i { color: var(--accent); font-style: normal; }
.dev.tv { position: absolute; right: 0; top: 10px; width: 92%; height: 250px; border: 10px solid #1b1f29; border-radius: 16px; background: #1b1f29;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dev.tv .foot { position: absolute; left: 40%; right: 40%; bottom: -46px; height: 30px; border-radius: 0 0 8px 8px; background: #1b1f29; }
.dev.phone { position: absolute; left: 0; bottom: 0; width: 120px; height: 230px; border: 8px solid #252b38; border-radius: 22px; background: #252b38;
  box-shadow: 0 20px 50px rgba(0,0,0,.7); }
.dev.phone .scr span { font-size: 46px; }

.ap-section { max-width: 1240px; margin: 0 auto; padding: 40px 4vw; }
.ap-section > h2 { font-size: 30px; letter-spacing: -.5px; margin: 0 0 8px; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.ap-card { background: var(--panel); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; padding: 20px; }
.ap-card .ico { font-size: 30px; }
.ap-card h3 { margin: 10px 0 6px; font-size: 18px; }
.ap-card p { margin: 0; color: #b9c0cf; line-height: 1.55; }
.ap-card.dl { display: flex; flex-direction: column; }
.ap-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.ap-btns .btn small { color: inherit; opacity: .7; font-weight: 400; }
.ap-card.dl > p.small { margin-top: auto; padding-top: 8px; font-size: 12.5px; }

.ap-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.ap-plan { background: var(--panel); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.05); }
.ap-plan.trial { border-color: rgba(229,72,77,.5); }
.ap-plan h3 { margin: 0 0 6px; }
.ap-plan .price { font-size: 26px; font-weight: 800; }
.ap-plan .price small { font-size: 14px; font-weight: 400; color: var(--muted); }
.ap-plan ul { padding-left: 18px; color: #c9cfdb; margin: 10px 0 16px; }
.ap-plan .btn { margin-top: auto; text-align: center; }

.ap-help { background: var(--panel); border-radius: 12px; padding: 14px 18px; margin-top: 14px; }
.ap-help summary { cursor: pointer; font-weight: 600; }
.ap-help ol { color: #c9cfdb; line-height: 1.7; margin: 10px 0 4px; }
.ap-help code { background: #0b0d12; padding: 2px 8px; border-radius: 6px; }

.ap-foot { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; max-width: 1240px; margin: 30px auto 0;
  padding: 26px 4vw 40px; border-top: 1px solid rgba(255,255,255,.06); }
.ap-foot a { color: var(--muted); }

@media (max-width: 860px) {
  .ap-hero { grid-template-columns: 1fr; padding-top: 36px; }
  .ap-devices { height: 230px; }
  .dev.tv { height: 170px; }
  .dev.phone { width: 90px; height: 170px; }
  .ap-top nav { display: none; }
  .ap-top .lang-select { margin-left: auto; }
}