Ajoute une page utilisateur et une persistance MySQL

styles.css

@@ -422,6 +422,7 @@ fieldset {
 }
 
 input:not([type="radio"]):not([type="checkbox"]),
+select,
 textarea {
   width: 100%;
   padding: 0.95rem 1rem;
@@ -439,6 +440,7 @@ textarea {
 }
 
 input:not([type="radio"]):not([type="checkbox"]):focus,
+select:focus,
 textarea:focus {
   outline: 2px solid rgba(52, 141, 255, 0.45);
   outline-offset: 1px;
@@ -1476,6 +1478,72 @@ body.site-menu-hidden .site-menu-shell {
   box-shadow: none;
 }
 
+.user-hero {
+  align-items: stretch;
+}
+
+.profile-meta-grid,
+.profile-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+}
+
+.profile-meta-card {
+  display: grid;
+  gap: 0.35rem;
+  padding: 1rem;
+  border-radius: 22px;
+  border: 1px solid var(--panel-border);
+  background: var(--panel-alt);
+}
+
+.profile-meta-card strong {
+  font-size: 1rem;
+}
+
+.profile-highlights {
+  margin-bottom: 0.9rem;
+}
+
+.profile-callout {
+  min-height: 100%;
+}
+
+.profile-callout p {
+  margin-bottom: 0;
+}
+
+.profile-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.profile-actions .section-copy {
+  margin-bottom: 0;
+}
+
+.profile-feedback {
+  margin: 0 0 1rem;
+  padding: 0.85rem 1rem;
+  border-radius: 18px;
+}
+
+.profile-feedback.success {
+  border: 1px solid rgba(69, 185, 127, 0.3);
+  background: rgba(69, 185, 127, 0.12);
+  color: #dff7ea;
+}
+
+.profile-feedback.error {
+  border: 1px solid rgba(255, 100, 127, 0.28);
+  background: rgba(255, 100, 127, 0.12);
+  color: #ffd8de;
+}
+
 @media (max-width: 1100px) {
   .hero,
   .setup-grid,
@@ -1498,6 +1566,11 @@ body.site-menu-hidden .site-menu-shell {
     grid-column: span 12;
   }
 
+  .profile-meta-grid,
+  .profile-form-grid {
+    grid-template-columns: 1fr;
+  }
+
   .phase-header {
     grid-template-columns: 1fr;
     text-align: center;