Corrige le débordement mobile plein écran

2026-04-12 16:45:00 +02:00
parent e6677df9ae
commit 39c563ff37
1 changed files with 124 additions and 0 deletions
--- a/styles.css
+++ b/styles.css
@@ -1857,3 +1857,127 @@ textarea:focus {
    font-size: 0.9rem;
  }
 }
+
+/* Keep phase pages inside the visible mobile viewport, including safe areas. */
+.phase-body {
+  padding: 0;
+}
+
+.phase-body .phase-shell {
+  box-sizing: border-box;
+  width: min(1400px, 100%);
+  min-height: 100dvh;
+  height: 100dvh;
+  max-height: 100dvh;
+  padding:
+    calc(var(--safe-top) + 0.8rem)
+    calc(var(--safe-right) + 0.6rem)
+    calc(var(--safe-bottom) + 0.9rem)
+    calc(var(--safe-left) + 0.6rem);
+  overflow: hidden;
+}
+
+@media (max-width: 900px) {
+  .phase-body .phase-shell {
+    width: 100%;
+    padding:
+      calc(var(--safe-top) + 0.55rem)
+      calc(var(--safe-right) + 0.5rem)
+      calc(var(--safe-bottom) + 0.55rem)
+      calc(var(--safe-left) + 0.5rem);
+  }
+}
+
+@media (max-height: 540px) {
+  .phase-body .phase-shell {
+    gap: 0.2rem;
+    padding:
+      calc(var(--safe-top) + 0.2rem)
+      calc(var(--safe-right) + 0.35rem)
+      calc(var(--safe-bottom) + 0.2rem)
+      calc(var(--safe-left) + 0.35rem);
+  }
+
+  .phase-body .phase-header {
+    padding: 0.32rem 0.4rem;
+    border-radius: 16px;
+  }
+
+  .phase-body .brand-link-icon {
+    width: 1.8rem;
+  }
+
+  .phase-body .phase-title h1 {
+    font-size: 0.86rem;
+  }
+
+  .phase-body .status-strip,
+  .phase-body .faceoff-board {
+    gap: 0.2rem;
+  }
+
+  .phase-body .status-card {
+    min-height: 2.05rem;
+    padding: 0.18rem 0.14rem;
+    border-radius: 14px;
+  }
+
+  .phase-body .status-card span {
+    font-size: 0.5rem;
+  }
+
+  .phase-body .status-card strong {
+    font-size: 0.72rem;
+  }
+
+  .phase-body .zone-inner {
+    padding: 0.28rem;
+    gap: 0.18rem;
+    border-radius: 14px;
+  }
+
+  .phase-body .zone-head h2 {
+    font-size: 0.72rem;
+  }
+
+  .phase-body .zone-stats strong {
+    font-size: 0.7rem;
+  }
+
+  .phase-body .zone-stats span {
+    font-size: 0.58rem;
+  }
+
+  .phase-body .seat-tag {
+    padding: 0.12rem 0.32rem;
+    font-size: 0.48rem;
+  }
+
+  .phase-body .zone-button {
+    min-height: clamp(48px, 7vh, 72px);
+    padding: 0.4rem;
+    border-radius: 16px;
+    font-size: clamp(0.88rem, 4.4vw, 1.05rem);
+  }
+
+  .phase-body .spine-card {
+    padding: 0.35rem 0.45rem;
+    border-radius: 14px;
+  }
+
+  .phase-body .spine-card strong {
+    font-size: 0.8rem;
+  }
+
+  .phase-body .spine-button {
+    min-height: 1.9rem;
+    padding: 0.32rem;
+    border-radius: 14px;
+    font-size: 0.72rem;
+  }
+
+  .phase-body .utility-button {
+    padding: 0.38rem 0.6rem;
+    font-size: 0.72rem;
+  }
+}