/* Page d'explication + cadre de téléphone : bureau dès 1024 px, accueil seulement. */
.presentation { display: none; }

@media (min-width: 1024px) {
  body.is-presentation { padding-top: 0; background: #1a1a1a; color: #F1EEE8; }
  .is-presentation .topnav, .is-presentation .app, .is-presentation .sitefooter, .is-presentation .prio-dock { display: none; }

  .presentation { display: flex; justify-content: center; align-items: center; gap: 96px; min-height: 100vh; padding: 40px; }
  .presentation__text { width: 420px; flex: none; display: grid; gap: 14px; font-size: 16px; line-height: 1.5; }
  .presentation__title { font-size: 44px; font-weight: 800; letter-spacing: -0.035em; color: #F1EEE8; }
  .presentation__lead { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
  .presentation__q { margin-top: 8px; font-weight: 700; }
  .presentation__note { margin-top: 12px; color: #B9B5AC; }
  .presentation__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .presentation__link:hover { color: #fff; }

  .presentation__stage { display: grid; justify-items: center; gap: 16px; width: 402px; flex: none; text-align: center; }
  .presentation__caption { max-width: 340px; color: #9A968D; font-size: 14px; }
  .presentation__stage .presentation__link { color: #9A968D; font-size: 14px; }
  .phone { width: 402px; height: min(847px, calc(100svh - 150px)); min-height: 600px; padding: 10px; border-radius: 56px; background: #0a0a0a; box-shadow: 0 0 0 1px #333, 0 20px 50px rgba(0, 0, 0, 0.35); }
  .phone__screen { display: block; width: 100%; height: 100%; border: 0; border-radius: 46px; background: var(--bg); }
}

/* Dans le cadre : rien de ce qui sert au bureau seulement. */
.is-embed .topnav { display: none; }
.author { display: grid; gap: 12px; }