Corrige l'en-tête du chrono en PWA

styles.css

@@ -1861,6 +1861,13 @@ textarea:focus {
 /* Keep phase pages inside the visible mobile viewport, including safe areas. */
 .phase-body {
   padding: 0;
+  --phase-top-offset: var(--safe-top);
+}
+
+@media (display-mode: standalone), (display-mode: fullscreen) {
+  .phase-body {
+    --phase-top-offset: max(var(--safe-top), 1.15rem);
+  }
 }
 
 .phase-body .phase-shell {
@@ -1870,7 +1877,7 @@ textarea:focus {
   height: 100dvh;
   max-height: 100dvh;
   padding:
-    calc(var(--safe-top) + 0.8rem)
+    calc(var(--phase-top-offset) + 0.8rem)
     calc(var(--safe-right) + 0.6rem)
     calc(var(--safe-bottom) + 0.9rem)
     calc(var(--safe-left) + 0.6rem);
@@ -1881,7 +1888,7 @@ textarea:focus {
   .phase-body .phase-shell {
     width: 100%;
     padding:
-      calc(var(--safe-top) + 0.55rem)
+      calc(var(--phase-top-offset) + 0.55rem)
       calc(var(--safe-right) + 0.5rem)
       calc(var(--safe-bottom) + 0.55rem)
       calc(var(--safe-left) + 0.5rem);
@@ -1892,7 +1899,7 @@ textarea:focus {
   .phase-body .phase-shell {
     gap: 0.2rem;
     padding:
-      calc(var(--safe-top) + 0.2rem)
+      calc(var(--phase-top-offset) + 0.2rem)
       calc(var(--safe-right) + 0.35rem)
       calc(var(--safe-bottom) + 0.2rem)
       calc(var(--safe-left) + 0.35rem);
@@ -1981,3 +1988,36 @@ textarea:focus {
     font-size: 0.72rem;
   }
 }
+
+@media (max-width: 420px) {
+  body[data-page="chrono"] .phase-header {
+    grid-template-columns: auto auto;
+    grid-template-areas:
+      "brand action"
+      "title title";
+    align-items: center;
+    row-gap: 0.28rem;
+  }
+
+  body[data-page="chrono"] .brand-link-logo {
+    grid-area: brand;
+    justify-self: start;
+  }
+
+  body[data-page="chrono"] .utility-button {
+    grid-area: action;
+    justify-self: end;
+  }
+
+  body[data-page="chrono"] .phase-title {
+    grid-area: title;
+    min-width: 0;
+    text-align: center;
+  }
+
+  body[data-page="chrono"] .phase-title h1 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}