From dab6a517e3e44bf240806a807339765dfff22ab8 Mon Sep 17 00:00:00 2001
From: Christophe <christophe@jeannerot.fr>
Date: Sun, 12 Apr 2026 18:06:16 +0200
Subject: [PATCH] Retablit le scroll mobile sur chrono et cube

---
 styles.css | 42 ++++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/styles.css b/styles.css
index 4bc0478..b489231 100644
--- a/styles.css
+++ b/styles.css
@@ -2132,29 +2132,31 @@ textarea:focus {
   }
 }
 
-/* Lock chrono and cube to the visual viewport to avoid iOS bottom gaps. */
-body[data-page="chrono"],
-body[data-page="cube"] {
-  position: fixed;
-  inset: 0;
-  width: 100%;
+/* Let chrono and cube scroll naturally on iPhone while still filling the viewport. */
+body[data-page="chrono"].phase-body,
+body[data-page="cube"].phase-body {
+  position: static;
+  inset: auto;
+  width: auto;
   min-height: var(--app-viewport-height, 100dvh);
-  height: var(--app-viewport-height, 100dvh);
-  max-height: var(--app-viewport-height, 100dvh);
-  overflow: hidden;
-  overscroll-behavior: none;
+  height: auto;
+  max-height: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 body[data-page="chrono"] .chrono-stage,
 body[data-page="cube"] .cube-shell {
-  position: absolute;
-  inset: 0;
-  width: 100%;
+  position: relative;
+  inset: auto;
+  width: min(1400px, 100%);
   min-width: 0;
-  margin: 0;
-  min-height: 100%;
-  height: 100%;
-  max-height: 100%;
+  margin: 0 auto;
+  min-height: var(--app-viewport-height, 100dvh);
+  height: auto;
+  max-height: none;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   gap: 0.55rem;
@@ -2163,13 +2165,13 @@ body[data-page="cube"] .cube-shell {
     calc(var(--safe-right) + 0.5rem)
     calc(var(--safe-bottom) + 0.55rem)
     calc(var(--safe-left) + 0.5rem);
-  overflow: hidden;
+  overflow: visible;
 }
 
 body[data-page="chrono"] .faceoff-board,
 body[data-page="cube"] .faceoff-board {
   min-height: 0;
-  height: 100%;
+  height: auto;
   align-self: stretch;
 }
 
@@ -2192,7 +2194,7 @@ body[data-page="chrono"] .zone-inner {
 
 body[data-page="chrono"] .zone-button {
   min-height: 0;
-  height: 100%;
+  height: auto;
   flex: 1 1 auto;
 }