Compacte fortement le mode mobile

styles.css

@@ -1239,15 +1239,142 @@ textarea:focus {
 }
 
 @media (max-width: 640px) {
+  .phase-body .phase-shell {
+    width: min(100% - 0.45rem, 100%);
+    gap: 0.35rem;
+    padding: 0.35rem 0 0.35rem;
+  }
+
+  .phase-body .phase-header {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 0.35rem;
+    padding: 0.55rem 0.65rem;
+    border-radius: 20px;
+  }
+
+  .phase-body .brand-link {
+    padding: 0;
+    gap: 0.5rem;
+  }
+
+  .phase-body .brand-link-mark {
+    display: none;
+  }
+
+  .phase-body .brand-link-icon {
+    width: 2.45rem;
+  }
+
+  .phase-body .phase-title {
+    padding-inline: 0;
+  }
+
+  .phase-body .phase-header .eyebrow,
+  .phase-body .phase-subtitle,
+  .phase-body .zone-foot,
+  .phase-body .spine-card p {
+    display: none;
+  }
+
+  .phase-body .phase-title h1 {
+    font-size: clamp(1.05rem, 5.4vw, 1.35rem);
+  }
+
+  .phase-body .status-strip {
+    gap: 0.3rem;
+  }
+
+  .phase-body .status-card {
+    min-height: 3.35rem;
+    padding: 0.35rem 0.25rem;
+    border-radius: 18px;
+  }
+
+  .phase-body .status-card span {
+    font-size: 0.66rem;
+    line-height: 1.1;
+  }
+
+  .phase-body .status-card strong {
+    font-size: 0.98rem;
+  }
+
+  .phase-body .faceoff-board {
+    gap: 0.35rem;
+  }
+
+  .phase-body .zone-inner {
+    padding: 0.5rem;
+    gap: 0.4rem;
+    border-radius: 20px;
+  }
+
+  .phase-body .zone-head {
+    gap: 0.45rem;
+  }
+
+  .phase-body .zone-head h2 {
+    margin-top: 0.1rem;
+    font-size: 1rem;
+  }
+
+  .phase-body .zone-stats {
+    gap: 0.08rem;
+  }
+
+  .phase-body .zone-stats strong {
+    font-size: 0.95rem;
+  }
+
+  .phase-body .zone-stats span {
+    font-size: 0.78rem;
+  }
+
+  .phase-body .seat-tag {
+    padding: 0.22rem 0.55rem;
+    font-size: 0.62rem;
+  }
+
+  .phase-body .zone-button {
+    min-height: clamp(92px, 12.5vh, 132px);
+    padding: 0.75rem;
+    border-radius: 22px;
+    font-size: clamp(1.35rem, 6.2vw, 2.05rem);
+  }
+
+  .phase-body .phase-spine {
+    gap: 0.3rem;
+  }
+
+  .phase-body .spine-card {
+    padding: 0.55rem 0.65rem;
+    border-radius: 20px;
+  }
+
+  .phase-body .spine-card strong {
+    font-size: 1rem;
+  }
+
+  .phase-body .spine-button {
+    min-height: 2.9rem;
+    padding: 0.7rem;
+    border-radius: 18px;
+    font-size: 0.96rem;
+  }
+
+  .phase-body .utility-button {
+    min-height: auto;
+    padding: 0.55rem 0.8rem;
+    font-size: 0.9rem;
+  }
+
   body[data-page="cube"] .phase-header {
     grid-template-columns: minmax(0, 1fr) auto;
-    gap: 0.65rem;
-    padding: 0.8rem 0.9rem;
+    gap: 0.35rem;
   }
 
   body[data-page="cube"] .phase-title,
-  body[data-page="cube"] .phase-spine .spine-card,
-  body[data-page="cube"] .zone-foot {
+  body[data-page="cube"] .phase-spine .spine-card {
     display: none;
   }
 
@@ -1300,3 +1427,53 @@ textarea:focus {
     width: auto;
   }
 }
+
+@media (max-width: 480px) {
+  .phase-body .phase-header {
+    padding: 0.5rem 0.55rem;
+  }
+
+  .phase-body .brand-link-icon {
+    width: 2.15rem;
+  }
+
+  .phase-body .phase-title h1 {
+    font-size: 0.98rem;
+  }
+
+  .phase-body .status-card {
+    min-height: 3rem;
+    padding: 0.3rem 0.2rem;
+  }
+
+  .phase-body .status-card span {
+    font-size: 0.62rem;
+  }
+
+  .phase-body .status-card strong {
+    font-size: 0.9rem;
+  }
+
+  .phase-body .zone-head h2 {
+    font-size: 0.92rem;
+  }
+
+  .phase-body .zone-stats strong {
+    font-size: 0.86rem;
+  }
+
+  .phase-body .zone-stats span {
+    font-size: 0.72rem;
+  }
+
+  .phase-body .zone-button {
+    min-height: clamp(84px, 11.5vh, 112px);
+    font-size: clamp(1.22rem, 7vw, 1.75rem);
+  }
+
+  .phase-body .spine-button {
+    min-height: 2.7rem;
+    padding: 0.6rem;
+    font-size: 0.9rem;
+  }
+}