/* Mobile et petites tablettes (fenêtre de 900 px ou moins) : les mêmes éléments, en colonne.
   Au-dessus de 900 px, la page validée reste le canevas 1672 × 941 mis à l'échelle (script.js). */
@media (max-width: 900px) {
  .frame { height: auto; min-height: 100svh; overflow: visible; }
  .page {
    position: static; width: auto; height: auto; transform: none !important;
    display: flex; flex-direction: column;
    padding: 20px 20px 32px;
  }
  /* En-tête : logo à gauche, « Coming soon » à droite, sur une ligne */
  .brand { position: static; order: 1; }
  .brand__logo { width: 44px; height: 44px; }
  .brand__name { position: static; margin-left: 12px; font-size: 26px; align-self: center; }
  .pill-top {
    position: static; order: 1; width: auto; height: 40px; margin: -42px 0 0 auto; padding: 0 16px 0 12px; display: inline-flex; gap: 10px;
    box-shadow: 0 1px 2px rgba(20, 40, 80, 0.06), 0 6px 18px rgba(20, 40, 80, 0.05);
  }
  .pill-top__dot { position: static; width: 10px; height: 10px; }
  .pill-top__text { position: static; font-size: 14px; }

  .eyebrow { position: static; order: 2; margin-top: 40px; white-space: normal; font-size: 11px; letter-spacing: 0.22em; line-height: 1.5; }

  .title {
    position: static; order: 3; width: auto; margin-top: 14px; white-space: normal;
    font-size: clamp(38px, 11vw, 60px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
  }
  .title br { display: none; }

  .lead { position: static; order: 4; margin-top: 22px; white-space: normal; font-size: 17px; line-height: 1.5; max-width: 40ch; }
  .lead br { display: none; }

  .pill {
    position: static; order: 5; width: auto; height: auto; margin-top: 24px; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 12px;
  }
  .pill__dot { position: static; width: 12px; height: 12px; }
  .pill__text { position: static; font-size: 15px; }

  .schema-wrap { position: relative; order: 6; left: auto; top: auto; width: calc(100% + 24px); margin: 28px -12px 0; }
}
@media (max-width: 380px) {
  .pill-top { margin-top: 12px; margin-left: 0; }
  .brand__name { font-size: 24px; }
}