Integrer l'authentification Keycloak dans l'application

styles.css

@@ -1171,19 +1171,39 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
   color: var(--muted);
 }
 
-.auth-modal-frame-shell {
-  overflow: hidden;
-  border-radius: 22px;
-  border: 1px solid var(--panel-border);
-  background: rgba(10, 12, 17, 0.85);
+.auth-modal-switch {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
-.auth-modal-frame {
-  display: block;
-  width: 100%;
-  height: min(78dvh, 760px);
-  border: 0;
-  background: #141414;
+.auth-form-grid {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.auth-form-grid.two-columns {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.auth-form-error {
+  margin: 0 0 1rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid rgba(255, 100, 127, 0.28);
+  border-radius: 18px;
+  color: #ffd8de;
+  background: rgba(255, 100, 127, 0.12);
+}
+
+.validation-message {
+  color: #ffb3c0;
+  font-size: 0.88rem;
+  line-height: 1.35;
+}
+
+.auth-modal-card .field {
+  margin: 0;
 }
 
 .hero-rules h1 {
@@ -1534,8 +1554,8 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
     padding: 1rem;
   }
 
-  .auth-modal-frame {
-    height: min(70dvh, 680px);
+  .auth-form-grid.two-columns {
+    grid-template-columns: 1fr;
   }
 
   .setup-form {