/* Page « version téléphone » : le site dans un cadre de téléphone, vu depuis un ordinateur. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(80% 70% at 70% 40%, #2a1f12, #0b0907 70%); color: #f3ece0; font: 400 16px/1.6 'Geist', system-ui, sans-serif; }
body.clair { background: radial-gradient(80% 70% at 70% 40%, #fff3c4, #f3f3f1 70%); color: #121212; }
.scene { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 420px) auto; justify-content: center; align-items: center; gap: clamp(30px, 6vw, 90px); padding: 30px; }
.sur { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #d4a64a; }
.clair .sur { color: #121212; }
h1 { margin: 0; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; }
.texte > p { max-width: 36ch; color: inherit; opacity: .82; }
.qr-bloc { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.qr-bloc #qr { padding: 10px; border-radius: 14px; background: #fff; }
.qr-bloc #qr img, .qr-bloc #qr canvas { display: block; }
.qr-bloc p { margin: 0; max-width: 18ch; font-size: 14.5px; opacity: .8; }
.liens { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.liens a { color: inherit; font-weight: 600; text-underline-offset: 4px; }
.telephone { position: relative; width: 414px; height: min(878px, calc(100vh - 40px)); padding: 12px; border-radius: 56px; background: #050505; box-shadow: 0 0 0 2px #2b2b2b, 0 40px 90px rgba(0,0,0,.55); }
.telephone iframe { width: 390px; height: 100%; border: 0; border-radius: 44px; background: #fff; }
.encoche { position: absolute; left: 50%; top: 22px; z-index: 2; width: 110px; height: 30px; transform: translateX(-50%); border-radius: 20px; background: #050505; }
@media (max-width: 900px) { .scene { grid-template-columns: 1fr; justify-items: center; text-align: center; } .qr-bloc, .liens { justify-content: center; } .texte > p { margin-inline: auto; } }