/* Les deux écrans d'une démo côte à côte, reliés en direct. Sert aussi de plateau aux films. */
.page-duo { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--nuit); color: #c5d0e6; }
.duo-haut { flex: none; display: flex; align-items: center; gap: 24px; padding: 12px 28px; }
.duo-haut .logo { color: #fff; }
.duo-haut p { flex: 1; text-align: center; font-size: 16px; }
.duo-haut p b { color: #fff; }
.duo-haut .bouton { min-height: 40px; padding: 0 16px; font-size: 14px; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.scene-duo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 32px; padding: 6px 28px 18px; }
.poste, .mobile { flex: none; }
.poste p, .mobile p { margin-top: 10px; text-align: center; font-size: 13.5px; }
.ouvrir-pro { display: none; margin-top: 12px; color: #fff; font-weight: 650; font-size: 15px; text-align: center; }
.poste-ecran { position: relative; width: calc(1280px * var(--e)); height: calc(800px * var(--e)); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 7px #0d1426, 0 0 0 8px #33405f; }
.poste-ecran iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--e)); transform-origin: 0 0; }
.mobile-ecran { position: relative; width: calc(390px * var(--e)); height: calc(844px * var(--e)); border-radius: calc(46px * var(--e)); overflow: hidden; background: #fff; box-shadow: 0 0 0 7px #0d1426, 0 0 0 8px #33405f; }
.mobile-ecran iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--e)); transform-origin: 0 0; }
.mobile-ecran::before { content: ""; position: absolute; z-index: 2; top: calc(11px * var(--e)); left: 50%; width: calc(112px * var(--e)); height: calc(30px * var(--e)); transform: translateX(-50%); border-radius: 99px; background: #05070c; pointer-events: none; }
@media (max-width: 860px) {
  .page-duo { height: auto; min-height: 100dvh; overflow: auto; }
  .scene-duo { flex-direction: column; padding: 16px; }
  .scene-duo { padding-top: 4px; }
  .duo-haut { flex-wrap: wrap; padding: 12px 16px 8px; gap: 8px 12px; }
  .duo-haut p { order: 3; flex-basis: 100%; font-size: 15.5px; line-height: 1.4; text-wrap: balance; }
  .duo-haut .logo { margin-right: auto; }
  .mobile { display: flex; flex-direction: column; align-items: center; }
  .mobile > p { display: none; }
  .ouvrir-pro { display: block; order: -1; margin: 0 0 14px; }
}