From c10efa872cc41a1e5b5e9d786ded25dc605652fa Mon Sep 17 00:00:00 2001
From: Christophe <christophe@jeannerot.fr>
Date: Sun, 12 Apr 2026 12:12:25 +0200
Subject: [PATCH] Donne a l'interface un style neon inspire de Tron

---
 styles.css | 223 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 156 insertions(+), 67 deletions(-)

diff --git a/styles.css b/styles.css
index a4618ea..5ac0535 100644
--- a/styles.css
+++ b/styles.css
@@ -1,19 +1,25 @@
 :root {
-  --bg: #06131d;
-  --bg-soft: rgba(11, 26, 38, 0.88);
-  --panel: rgba(9, 22, 34, 0.9);
-  --panel-border: rgba(255, 255, 255, 0.08);
-  --text: #edf6f3;
-  --muted: #9bb1b6;
-  --warm: #ffbd6d;
-  --warm-strong: #ff8f37;
-  --cool: #64dfd4;
-  --cool-strong: #1bbcae;
-  --white-seat: #ffd9b0;
-  --dark-seat: #baf5ef;
-  --danger: #ff7272;
-  --success: #8fe388;
-  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
+  --bg: #01050b;
+  --bg-soft: rgba(2, 12, 20, 0.92);
+  --panel: rgba(4, 18, 30, 0.84);
+  --panel-border: rgba(98, 242, 255, 0.22);
+  --panel-border-soft: rgba(98, 242, 255, 0.1);
+  --panel-glow: rgba(56, 213, 255, 0.18);
+  --grid-line: rgba(92, 234, 255, 0.09);
+  --text: #e4fbff;
+  --muted: #7da9b6;
+  --warm: #ffb45d;
+  --warm-strong: #ff7a1f;
+  --cool: #75f2ff;
+  --cool-strong: #1ed6ff;
+  --white-seat: #ffd08a;
+  --dark-seat: #8ef6ff;
+  --danger: #ff647f;
+  --success: #9ff68e;
+  --shadow:
+    0 0 0 1px rgba(98, 242, 255, 0.08),
+    0 26px 80px rgba(0, 0, 0, 0.56),
+    0 0 34px rgba(30, 214, 255, 0.08);
   --radius: 28px;
 }
 
@@ -30,12 +36,13 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
-  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
   color: var(--text);
   background:
-    radial-gradient(circle at top left, rgba(255, 189, 109, 0.16), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(100, 223, 212, 0.18), transparent 26%),
-    linear-gradient(165deg, #020a10 0%, #07141d 45%, #0a2433 100%);
+    radial-gradient(circle at top left, rgba(255, 122, 31, 0.18), transparent 22%),
+    radial-gradient(circle at 78% 18%, rgba(30, 214, 255, 0.18), transparent 20%),
+    radial-gradient(circle at bottom center, rgba(30, 214, 255, 0.1), transparent 26%),
+    linear-gradient(180deg, #01040a 0%, #03101b 48%, #041522 100%);
 }
 
 body::before {
@@ -44,10 +51,21 @@ body::before {
   inset: 0;
   pointer-events: none;
   background-image:
-    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
-  background-size: 40px 40px;
-  mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 50% 110%, rgba(30, 214, 255, 0.24), transparent 24%),
+    linear-gradient(180deg, transparent 0 58%, rgba(30, 214, 255, 0.06) 72%, transparent 100%);
+  mix-blend-mode: screen;
 }
 
 .ambient {
@@ -55,8 +73,8 @@ body::before {
   width: 30rem;
   height: 30rem;
   border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.22;
+  filter: blur(90px);
+  opacity: 0.28;
   pointer-events: none;
 }
 
@@ -73,7 +91,7 @@ body::before {
 }
 
 a {
-  color: var(--warm);
+  color: var(--cool);
   text-decoration: none;
 }
 
@@ -85,9 +103,11 @@ a:hover {
 .micro-label {
   margin: 0 0 0.45rem;
   text-transform: uppercase;
-  letter-spacing: 0.18em;
+  letter-spacing: 0.22em;
   color: var(--cool);
-  font-size: 0.76rem;
+  font-size: 0.78rem;
+  font-family: "Consolas", "Lucida Console", monospace;
+  text-shadow: 0 0 14px rgba(30, 214, 255, 0.22);
 }
 
 .micro-label {
@@ -98,7 +118,7 @@ h1,
 h2,
 h3,
 strong {
-  font-family: "Baskerville", "Georgia", serif;
+  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
 }
 
 h1,
@@ -122,13 +142,19 @@ p {
 
 .button {
   appearance: none;
-  border: 0;
+  border: 1px solid transparent;
   border-radius: 18px;
   padding: 0.95rem 1.15rem;
   font: inherit;
-  font-weight: 700;
+  font-weight: 800;
+  letter-spacing: 0.04em;
   cursor: pointer;
-  transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
+  transition:
+    transform 160ms ease,
+    filter 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    border-color 160ms ease;
   color: var(--text);
 }
 
@@ -144,18 +170,25 @@ p {
 }
 
 .button.primary {
-  background: linear-gradient(135deg, var(--warm-strong), var(--warm));
-  color: #20150a;
+  background:
+    linear-gradient(135deg, rgba(30, 214, 255, 0.22), rgba(7, 32, 44, 0.96)),
+    linear-gradient(135deg, var(--cool-strong), var(--cool));
+  border-color: rgba(117, 242, 255, 0.5);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 0 24px rgba(30, 214, 255, 0.16);
 }
 
 .button.secondary {
-  background: linear-gradient(135deg, rgba(100, 223, 212, 0.18), rgba(100, 223, 212, 0.08));
-  border: 1px solid rgba(100, 223, 212, 0.2);
+  background: linear-gradient(135deg, rgba(255, 122, 31, 0.18), rgba(255, 180, 93, 0.08));
+  border-color: rgba(255, 180, 93, 0.32);
+  box-shadow: 0 0 18px rgba(255, 122, 31, 0.1);
 }
 
 .button.ghost {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.09);
+  background: linear-gradient(180deg, rgba(6, 20, 31, 0.92), rgba(3, 11, 18, 0.92));
+  border-color: var(--panel-border-soft);
+  box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.04);
 }
 
 .button.danger {
@@ -176,13 +209,29 @@ p {
 
 .hero,
 .panel {
+  position: relative;
+  overflow: hidden;
   border: 1px solid var(--panel-border);
   border-radius: calc(var(--radius) + 4px);
-  background: var(--panel);
+  background:
+    linear-gradient(180deg, rgba(7, 24, 39, 0.92), rgba(3, 11, 18, 0.94)),
+    var(--panel);
   backdrop-filter: blur(20px);
   box-shadow: var(--shadow);
 }
 
+.hero::before,
+.panel::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--cool), transparent);
+  opacity: 0.55;
+  pointer-events: none;
+}
+
 .hero {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
@@ -204,6 +253,10 @@ p {
   margin: 0;
   font-size: clamp(2.7rem, 6.5vw, 4.9rem);
   line-height: 0.95;
+  letter-spacing: 0.03em;
+  text-shadow:
+    0 0 12px rgba(30, 214, 255, 0.18),
+    0 0 28px rgba(30, 214, 255, 0.08);
 }
 
 .hero-pills {
@@ -221,8 +274,9 @@ p {
   justify-content: center;
   padding: 0.42rem 0.78rem;
   border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--panel-border-soft);
+  background: linear-gradient(180deg, rgba(7, 26, 40, 0.88), rgba(2, 13, 22, 0.92));
+  box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03);
 }
 
 .preview-card,
@@ -235,9 +289,12 @@ p {
 .modal-card,
 .zone-inner {
   border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--panel-border-soft);
   background:
-    linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+    linear-gradient(160deg, rgba(10, 31, 47, 0.96), rgba(3, 13, 21, 0.96));
+  box-shadow:
+    inset 0 0 0 1px rgba(30, 214, 255, 0.03),
+    0 0 22px rgba(30, 214, 255, 0.04);
 }
 
 .preview-card,
@@ -311,8 +368,10 @@ textarea {
   width: 100%;
   padding: 0.95rem 1rem;
   border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.09);
-  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--panel-border-soft);
+  background:
+    linear-gradient(180deg, rgba(3, 14, 23, 0.96), rgba(2, 10, 16, 0.96));
+  box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03);
   color: var(--text);
   font: inherit;
 }
@@ -324,7 +383,7 @@ textarea {
 
 input:focus,
 textarea:focus {
-  outline: 2px solid rgba(100, 223, 212, 0.35);
+  outline: 2px solid rgba(30, 214, 255, 0.45);
   outline-offset: 1px;
 }
 
@@ -348,15 +407,21 @@ textarea:focus {
   min-height: 8.7rem;
   padding: 1rem 1rem 1rem 3rem;
   border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--panel-border-soft);
+  background:
+    linear-gradient(160deg, rgba(7, 25, 39, 0.96), rgba(2, 10, 17, 0.96));
   cursor: pointer;
-  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease;
 }
 
 .option-card:hover {
   transform: translateY(-3px);
-  border-color: rgba(255, 189, 109, 0.3);
+  border-color: rgba(30, 214, 255, 0.34);
+  box-shadow: 0 0 20px rgba(30, 214, 255, 0.08);
 }
 
 .option-card input {
@@ -368,9 +433,12 @@ textarea:focus {
 }
 
 .option-card:has(input:checked) {
-  border-color: rgba(255, 189, 109, 0.55);
+  border-color: rgba(30, 214, 255, 0.52);
   background:
-    linear-gradient(160deg, rgba(255, 189, 109, 0.17), rgba(100, 223, 212, 0.08));
+    linear-gradient(160deg, rgba(30, 214, 255, 0.16), rgba(255, 122, 31, 0.08));
+  box-shadow:
+    inset 0 0 0 1px rgba(30, 214, 255, 0.06),
+    0 0 24px rgba(30, 214, 255, 0.08);
 }
 
 .setup-summary {
@@ -438,9 +506,10 @@ textarea:focus {
   justify-self: start;
   padding: 0.75rem 1rem;
   border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--panel-border-soft);
+  background: linear-gradient(180deg, rgba(8, 28, 43, 0.92), rgba(3, 11, 18, 0.92));
   color: var(--text);
+  box-shadow: inset 0 0 0 1px rgba(30, 214, 255, 0.03);
 }
 
 .brand-link:hover {
@@ -454,6 +523,9 @@ textarea:focus {
 .phase-title h1 {
   margin: 0;
   font-size: clamp(1.9rem, 4vw, 3rem);
+  text-shadow:
+    0 0 12px rgba(30, 214, 255, 0.16),
+    0 0 24px rgba(30, 214, 255, 0.06);
 }
 
 .phase-subtitle {
@@ -489,7 +561,8 @@ textarea:focus {
 
 .status-card.wide {
   background:
-    linear-gradient(160deg, rgba(255, 189, 109, 0.14), rgba(100, 223, 212, 0.08));
+    linear-gradient(160deg, rgba(30, 214, 255, 0.14), rgba(255, 122, 31, 0.09));
+  border-color: rgba(30, 214, 255, 0.22);
 }
 
 .faceoff-board {
@@ -542,13 +615,15 @@ textarea:focus {
 }
 
 .light-seat {
-  background: rgba(255, 189, 109, 0.14);
+  background: rgba(255, 180, 93, 0.12);
   color: var(--white-seat);
+  box-shadow: 0 0 16px rgba(255, 122, 31, 0.12);
 }
 
 .dark-seat {
-  background: rgba(100, 223, 212, 0.14);
+  background: rgba(117, 242, 255, 0.12);
   color: var(--dark-seat);
+  box-shadow: 0 0 16px rgba(30, 214, 255, 0.12);
 }
 
 .zone-button {
@@ -556,7 +631,7 @@ textarea:focus {
   min-height: clamp(220px, 44vh, 560px);
   padding: 1rem;
   border-radius: 28px;
-  border: 1px solid rgba(255, 255, 255, 0.09);
+  border: 1px solid currentColor;
   font: inherit;
   font-weight: 800;
   letter-spacing: 0.01em;
@@ -564,8 +639,13 @@ textarea:focus {
   font-size: clamp(2.1rem, 5vw, 4.5rem);
   cursor: pointer;
   color: var(--text);
-  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
+  transition:
+    transform 150ms ease,
+    filter 150ms ease,
+    opacity 150ms ease,
+    box-shadow 150ms ease;
   touch-action: manipulation;
+  text-shadow: 0 0 18px rgba(255, 255, 255, 0.05);
 }
 
 .zone-button:hover {
@@ -581,20 +661,28 @@ textarea:focus {
 
 .light-button {
   background:
-    linear-gradient(165deg, rgba(255, 143, 55, 0.24), rgba(255, 189, 109, 0.1));
-  box-shadow: inset 0 0 0 1px rgba(255, 189, 109, 0.08);
+    linear-gradient(165deg, rgba(255, 122, 31, 0.24), rgba(255, 180, 93, 0.08)),
+    linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
+  color: var(--white-seat);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 180, 93, 0.08),
+    0 0 28px rgba(255, 122, 31, 0.08);
 }
 
 .dark-button {
   background:
-    linear-gradient(165deg, rgba(27, 188, 174, 0.22), rgba(100, 223, 212, 0.09));
-  box-shadow: inset 0 0 0 1px rgba(100, 223, 212, 0.08);
+    linear-gradient(165deg, rgba(30, 214, 255, 0.2), rgba(117, 242, 255, 0.08)),
+    linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
+  color: var(--dark-seat);
+  box-shadow:
+    inset 0 0 0 1px rgba(117, 242, 255, 0.08),
+    0 0 28px rgba(30, 214, 255, 0.08);
 }
 
 .zone-button.active-turn {
   box-shadow:
     0 0 0 1px rgba(255, 255, 255, 0.08),
-    0 0 40px rgba(255, 189, 109, 0.18);
+    0 0 40px rgba(30, 214, 255, 0.18);
   animation: pulse 1.6s ease-in-out infinite;
 }
 
@@ -654,7 +742,8 @@ textarea:focus {
   position: relative;
   z-index: 1;
   width: min(760px, 100%);
-  background: rgba(10, 23, 35, 0.96);
+  background:
+    linear-gradient(180deg, rgba(8, 25, 39, 0.98), rgba(2, 9, 16, 0.98));
   box-shadow: var(--shadow);
 }
 
@@ -682,13 +771,13 @@ textarea:focus {
   100% {
     box-shadow:
       0 0 0 1px rgba(255, 255, 255, 0.08),
-      0 0 28px rgba(255, 189, 109, 0.12);
+      0 0 28px rgba(30, 214, 255, 0.16);
   }
 
   50% {
     box-shadow:
       0 0 0 1px rgba(255, 255, 255, 0.1),
-      0 0 38px rgba(255, 189, 109, 0.2);
+      0 0 38px rgba(30, 214, 255, 0.24);
   }
 }