From c85451dbaef8b7410ad277febce31492250e09f3 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 11 Dec 2025 01:58:18 +0000
Subject: [PATCH] merde

---
 src/styles/auth.css | 367 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 367 insertions(+)
 create mode 100644 src/styles/auth.css

diff --git a/src/styles/auth.css b/src/styles/auth.css
new file mode 100644
index 0000000..0450082
--- /dev/null
+++ b/src/styles/auth.css
@@ -0,0 +1,367 @@
+/* =========================================================
+   SOCIOWIRE - AUTH POPUP (LOGIN / SIGNUP)
+   - Centre l’overlay
+   - 2 colonnes propres pour Prénom / Nom
+   - Inputs full-width sans dépasser
+   ========================================================= */
+
+/* Overlay plein écran */
+.auth-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at top, rgba(8, 47, 73, 0.55), transparent 60%),
+              rgba(15, 23, 42, 0.86);
+  backdrop-filter: blur(6px);
+}
+
+/* Boîte principale */
+.auth-dialog {
+  width: min(520px, 100% - 2rem);
+  max-width: 520px;
+  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.15), transparent 55%),
+              rgba(15, 23, 42, 0.97);
+  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.9);
+  box-shadow:
+    0 18px 50px rgba(0, 0, 0, 0.9),
+    0 0 22px rgba(56, 189, 248, 0.55);
+  padding: 1rem 1.15rem 1.15rem 1.15rem;
+  color: #e5e7eb;
+}
+
+/* Header: onglets + X */
+.auth-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: .8rem;
+}
+
+.auth-tabs {
+  display: inline-flex;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.9);
+  padding: 2px;
+  gap: 2px;
+}
+
+.auth-tab {
+  padding: 0.28rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #e5e7eb;
+  font-size: .8rem;
+  cursor: pointer;
+}
+
+.auth-tab-active {
+  border-color: rgba(59, 130, 246, 0.9);
+  background: radial-gradient(circle at top, rgba(59,130,246,.9), rgba(30,64,175,.95));
+  box-shadow:
+    0 0 12px rgba(59, 130, 246, 0.8),
+    0 6px 18px rgba(15, 23, 42, 0.9);
+}
+
+.auth-close {
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  font-size: .9rem;
+  cursor: pointer;
+}
+
+/* Corps du formulaire */
+.auth-body {
+  display: flex;
+  flex-direction: column;
+  gap: .55rem;
+}
+
+/* Ligne normale (1 colonne) */
+.auth-row {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+
+/* Ligne à 2 colonnes (Prénom / Nom) */
+.auth-row-two {
+  display: flex;
+  gap: .7rem;
+}
+
+.auth-row-two .auth-field {
+  flex: 1;
+  min-width: 0; /* évite que ça dépasse en largeur */
+}
+
+/* Champ générique */
+.auth-field {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+
+.auth-label {
+  font-size: .78rem;
+  color: #cbd5f5;
+}
+
+.auth-input {
+  width: 100%;
+  border-radius: 999px;
+  border: 1px solid #4b5563;
+  padding: 0.4rem 0.85rem;
+  background: rgba(15, 23, 42, 0.96);
+  color: #e5e7eb;
+  font-size: .82rem;
+  outline: none;
+}
+
+.auth-input:focus {
+  border-color: rgba(59, 130, 246, 0.95);
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.9);
+}
+
+/* Message d’erreur/succès */
+.auth-message {
+  font-size: .75rem;
+  margin-top: .15rem;
+}
+.auth-message-error {
+  color: #fecaca;
+}
+.auth-message-ok {
+  color: #bbf7d0;
+}
+
+/* Bouton principal */
+.auth-submit {
+  margin-top: .6rem;
+  width: 100%;
+  border-radius: 999px;
+  border: 1px solid #22c55e;
+  padding: 0.55rem 0.9rem;
+  background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
+  color: #f9fafb;
+  font-size: .9rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow:
+    0 4px 12px rgba(22, 163, 74, 0.7),
+    0 0 12px rgba(22, 163, 74, 0.7);
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .auth-dialog {
+    width: calc(100% - 1.2rem);
+    padding-inline: .9rem;
+  }
+  .auth-row-two {
+    flex-direction: row;
+  }
+}
+
+/* Thème clair : on éclaircit le panneau, on garde la structure */
+body[data-theme="light"] .auth-dialog {
+  background: rgba(248, 250, 252, 0.98);
+  color: #0f172a;
+}
+body[data-theme="light"] .auth-label {
+  color: #1f2937;
+}
+body[data-theme="light"] .auth-input {
+  background: #f9fafb;
+  color: #111827;
+  border-color: #cbd5e1;
+}
+EOFcat <<'EOF' > src/styles/auth.css
+/* =========================================================
+   SOCIOWIRE - AUTH POPUP (LOGIN / SIGNUP)
+   - Centre l’overlay
+   - 2 colonnes propres pour Prénom / Nom
+   - Inputs full-width sans dépasser
+   ========================================================= */
+
+/* Overlay plein écran */
+.auth-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at top, rgba(8, 47, 73, 0.55), transparent 60%),
+              rgba(15, 23, 42, 0.86);
+  backdrop-filter: blur(6px);
+}
+
+/* Boîte principale */
+.auth-dialog {
+  width: min(520px, 100% - 2rem);
+  max-width: 520px;
+  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.15), transparent 55%),
+              rgba(15, 23, 42, 0.97);
+  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.9);
+  box-shadow:
+    0 18px 50px rgba(0, 0, 0, 0.9),
+    0 0 22px rgba(56, 189, 248, 0.55);
+  padding: 1rem 1.15rem 1.15rem 1.15rem;
+  color: #e5e7eb;
+}
+
+/* Header: onglets + X */
+.auth-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: .8rem;
+}
+
+.auth-tabs {
+  display: inline-flex;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.9);
+  padding: 2px;
+  gap: 2px;
+}
+
+.auth-tab {
+  padding: 0.28rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #e5e7eb;
+  font-size: .8rem;
+  cursor: pointer;
+}
+
+.auth-tab-active {
+  border-color: rgba(59, 130, 246, 0.9);
+  background: radial-gradient(circle at top, rgba(59,130,246,.9), rgba(30,64,175,.95));
+  box-shadow:
+    0 0 12px rgba(59, 130, 246, 0.8),
+    0 6px 18px rgba(15, 23, 42, 0.9);
+}
+
+.auth-close {
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  font-size: .9rem;
+  cursor: pointer;
+}
+
+/* Corps du formulaire */
+.auth-body {
+  display: flex;
+  flex-direction: column;
+  gap: .55rem;
+}
+
+/* Ligne normale (1 colonne) */
+.auth-row {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+
+/* Ligne à 2 colonnes (Prénom / Nom) */
+.auth-row-two {
+  display: flex;
+  gap: .7rem;
+}
+
+.auth-row-two .auth-field {
+  flex: 1;
+  min-width: 0; /* évite que ça dépasse en largeur */
+}
+
+/* Champ générique */
+.auth-field {
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+
+.auth-label {
+  font-size: .78rem;
+  color: #cbd5f5;
+}
+
+.auth-input {
+  width: 100%;
+  border-radius: 999px;
+  border: 1px solid #4b5563;
+  padding: 0.4rem 0.85rem;
+  background: rgba(15, 23, 42, 0.96);
+  color: #e5e7eb;
+  font-size: .82rem;
+  outline: none;
+}
+
+.auth-input:focus {
+  border-color: rgba(59, 130, 246, 0.95);
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.9);
+}
+
+/* Message d’erreur/succès */
+.auth-message {
+  font-size: .75rem;
+  margin-top: .15rem;
+}
+.auth-message-error {
+  color: #fecaca;
+}
+.auth-message-ok {
+  color: #bbf7d0;
+}
+
+/* Bouton principal */
+.auth-submit {
+  margin-top: .6rem;
+  width: 100%;
+  border-radius: 999px;
+  border: 1px solid #22c55e;
+  padding: 0.55rem 0.9rem;
+  background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
+  color: #f9fafb;
+  font-size: .9rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow:
+    0 4px 12px rgba(22, 163, 74, 0.7),
+    0 0 12px rgba(22, 163, 74, 0.7);
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .auth-dialog {
+    width: calc(100% - 1.2rem);
+    padding-inline: .9rem;
+  }
+  .auth-row-two {
+    flex-direction: row;
+  }
+}
+
+/* Thème clair : on éclaircit le panneau, on garde la structure */
+body[data-theme="light"] .auth-dialog {
+  background: rgba(248, 250, 252, 0.98);
+  color: #0f172a;
+}
+body[data-theme="light"] .auth-label {
+  color: #1f2937;
+}
+body[data-theme="light"] .auth-input {
+  background: #f9fafb;
+  color: #111827;
+  border-color: #cbd5e1;
+}