*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); color: var(--color-text); background: #E8E8E8; margin: 0; min-height: 100vh; } button { border: none; background: none; cursor: pointer; padding: 0; font: inherit; color: inherit; } /* Phone frame */ .phone-frame { width: var(--frame-width); height: var(--frame-height); border-radius: var(--frame-radius); background: var(--color-bg); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.12); } /* Compact : plein écran (data-layout défini dans via innerWidth — fiable sur iPhone) */ html[data-layout="compact"] body { background: var(--color-bg); } html[data-layout="compact"] .demo-layout { display: block; width: 100%; min-height: 100vh; min-height: 100dvh; } html[data-layout="compact"] .phone-frame { width: 100%; max-width: none; min-width: 0; height: auto; min-height: 100vh; min-height: 100dvh; border-radius: 0; box-shadow: none; margin: 0; }