From e7e65d0b3fd3191b21e8d08c53deade5295b3eab Mon Sep 17 00:00:00 2001
From: Christophe <christophe@jeannerot.fr>
Date: Sun, 12 Apr 2026 13:22:57 +0200
Subject: [PATCH] =?UTF-8?q?Adoucit=20la=20charte=20et=20r=C3=A9duit=20les?=
 =?UTF-8?q?=20grandes=20typos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles.css | 265 +++++++++++++++++++----------------------------------
 1 file changed, 92 insertions(+), 173 deletions(-)

diff --git a/styles.css b/styles.css
index 3fd9334..a28d406 100644
--- a/styles.css
+++ b/styles.css
@@ -1,25 +1,21 @@
 :root {
-  --bg: #040404;
-  --bg-soft: rgba(9, 10, 13, 0.94);
-  --panel: rgba(10, 12, 18, 0.88);
-  --panel-border: rgba(50, 123, 255, 0.28);
-  --panel-border-soft: rgba(255, 255, 255, 0.08);
-  --panel-glow: rgba(43, 113, 255, 0.2);
-  --grid-line: rgba(40, 74, 153, 0.1);
-  --text: #f3f7ff;
-  --muted: #abb4c8;
-  --warm: #ffb253;
-  --warm-strong: #ff7a00;
-  --cool: #74aeff;
-  --cool-strong: #1762ff;
-  --white-seat: #ffc375;
-  --dark-seat: #7db0ff;
+  --bg: #000000;
+  --bg-soft: #090909;
+  --panel: #111111;
+  --panel-alt: #171717;
+  --panel-border: rgba(255, 255, 255, 0.1);
+  --panel-border-strong: rgba(255, 255, 255, 0.16);
+  --text: #f5f7fb;
+  --muted: #a7adbb;
+  --warm: #ff9d1e;
+  --warm-strong: #ff7f00;
+  --cool: #348dff;
+  --cool-strong: #1167ff;
+  --white-seat: #ffb13a;
+  --dark-seat: #4c97ff;
   --danger: #ff647f;
-  --success: #ffb253;
-  --shadow:
-    0 0 0 1px rgba(50, 123, 255, 0.08),
-    0 26px 80px rgba(0, 0, 0, 0.56),
-    0 0 34px rgba(23, 98, 255, 0.1);
+  --success: #ffb13a;
+  --shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
   --radius: 28px;
 }
 
@@ -86,11 +82,10 @@ a:hover {
 .micro-label {
   margin: 0 0 0.45rem;
   text-transform: uppercase;
-  letter-spacing: 0.22em;
+  letter-spacing: 0.18em;
   color: var(--cool);
   font-size: 0.78rem;
   font-family: "Consolas", "Lucida Console", monospace;
-  text-shadow: 0 0 14px rgba(23, 98, 255, 0.22);
 }
 
 .micro-label {
@@ -157,25 +152,21 @@ p {
 }
 
 .button.primary {
-  background:
-    linear-gradient(135deg, rgba(23, 98, 255, 0.24), rgba(8, 14, 28, 0.96)),
-    linear-gradient(135deg, var(--cool-strong), var(--cool));
-  border-color: rgba(116, 174, 255, 0.48);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
-    0 0 24px rgba(23, 98, 255, 0.18);
+  background: var(--cool-strong);
+  border-color: rgba(52, 141, 255, 0.55);
+  box-shadow: none;
 }
 
 .button.secondary {
-  background: linear-gradient(135deg, rgba(255, 122, 0, 0.22), rgba(255, 178, 83, 0.08));
-  border-color: rgba(255, 178, 83, 0.34);
-  box-shadow: 0 0 18px rgba(255, 122, 0, 0.12);
+  background: var(--warm-strong);
+  border-color: rgba(255, 157, 30, 0.4);
+  box-shadow: none;
 }
 
 .button.ghost {
-  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(23, 98, 255, 0.05);
+  background: #131313;
+  border-color: var(--panel-border);
+  box-shadow: none;
 }
 
 .button.danger {
@@ -200,23 +191,13 @@ p {
   overflow: hidden;
   border: 1px solid var(--panel-border);
   border-radius: calc(var(--radius) + 4px);
-  background:
-    linear-gradient(180deg, rgba(7, 24, 39, 0.92), rgba(3, 11, 18, 0.94)),
-    var(--panel);
-  backdrop-filter: blur(20px);
+  background: var(--panel);
   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;
+  display: none;
 }
 
 .hero {
@@ -255,28 +236,19 @@ p {
   display: block;
   width: clamp(72px, 9vw, 112px);
   height: auto;
-  filter:
-    drop-shadow(0 0 10px rgba(255, 122, 0, 0.1))
-    drop-shadow(0 0 14px rgba(23, 98, 255, 0.14));
 }
 
 .hero-logo {
   display: block;
   width: clamp(300px, 42vw, 620px);
   height: auto;
-  filter:
-    drop-shadow(0 0 12px rgba(255, 122, 0, 0.08))
-    drop-shadow(0 0 16px rgba(23, 98, 255, 0.14));
 }
 
 .hero-setup h1 {
   margin: 0;
-  font-size: clamp(2.7rem, 6.5vw, 4.9rem);
-  line-height: 0.95;
+  font-size: clamp(2.3rem, 5.2vw, 4rem);
+  line-height: 0.98;
   letter-spacing: 0.03em;
-  text-shadow:
-    0 0 12px rgba(23, 98, 255, 0.18),
-    0 0 28px rgba(255, 122, 0, 0.08);
 }
 
 .hero-pills {
@@ -294,9 +266,9 @@ p {
   justify-content: center;
   padding: 0.42rem 0.78rem;
   border-radius: 999px;
-  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(23, 98, 255, 0.05);
+  border: 1px solid var(--panel-border);
+  background: var(--panel-alt);
+  box-shadow: none;
 }
 
 .preview-card,
@@ -309,12 +281,9 @@ p {
 .modal-card,
 .zone-inner {
   border-radius: 24px;
-  border: 1px solid var(--panel-border-soft);
-  background:
-    linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96));
-  box-shadow:
-    inset 0 0 0 1px rgba(23, 98, 255, 0.05),
-    0 0 22px rgba(23, 98, 255, 0.08);
+  border: 1px solid var(--panel-border);
+  background: var(--panel-alt);
+  box-shadow: none;
 }
 
 .preview-card,
@@ -332,6 +301,8 @@ p {
   margin: 0.8rem 0 0;
   padding-left: 1.1rem;
   color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.5;
 }
 
 .phase-list li + li {
@@ -394,10 +365,9 @@ textarea {
   width: 100%;
   padding: 0.95rem 1rem;
   border-radius: 18px;
-  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(23, 98, 255, 0.05);
+  border: 1px solid var(--panel-border);
+  background: #0c0c0c;
+  box-shadow: none;
   color: var(--text);
   font: inherit;
 }
@@ -409,7 +379,7 @@ textarea {
 
 input:focus,
 textarea:focus {
-  outline: 2px solid rgba(23, 98, 255, 0.45);
+  outline: 2px solid rgba(52, 141, 255, 0.45);
   outline-offset: 1px;
 }
 
@@ -433,9 +403,8 @@ textarea:focus {
   min-height: 8.7rem;
   padding: 1rem 1rem 1rem 3rem;
   border-radius: 22px;
-  border: 1px solid var(--panel-border-soft);
-  background:
-    linear-gradient(160deg, rgba(7, 25, 39, 0.96), rgba(2, 10, 17, 0.96));
+  border: 1px solid var(--panel-border);
+  background: #121212;
   cursor: pointer;
   transition:
     transform 160ms ease,
@@ -446,8 +415,8 @@ textarea:focus {
 
 .option-card:hover {
   transform: translateY(-3px);
-  border-color: rgba(23, 98, 255, 0.34);
-  box-shadow: 0 0 20px rgba(23, 98, 255, 0.1);
+  border-color: rgba(52, 141, 255, 0.34);
+  box-shadow: none;
 }
 
 .option-card input {
@@ -459,12 +428,9 @@ textarea:focus {
 }
 
 .option-card:has(input:checked) {
-  border-color: rgba(23, 98, 255, 0.52);
-  background:
-    linear-gradient(160deg, rgba(23, 98, 255, 0.18), rgba(255, 122, 0, 0.1));
-  box-shadow:
-    inset 0 0 0 1px rgba(23, 98, 255, 0.06),
-    0 0 24px rgba(23, 98, 255, 0.1);
+  border-color: rgba(52, 141, 255, 0.52);
+  background: rgba(17, 103, 255, 0.14);
+  box-shadow: none;
 }
 
 .setup-summary {
@@ -535,10 +501,10 @@ textarea:focus {
   justify-self: start;
   padding: 0.75rem 1rem;
   border-radius: 18px;
-  border: 1px solid var(--panel-border-soft);
-  background: linear-gradient(180deg, rgba(12, 18, 32, 0.96), rgba(5, 8, 14, 0.96));
+  border: 1px solid var(--panel-border);
+  background: transparent;
   color: var(--text);
-  box-shadow: inset 0 0 0 1px rgba(23, 98, 255, 0.04);
+  box-shadow: none;
 }
 
 .brand-link:hover {
@@ -559,18 +525,12 @@ textarea:focus {
   display: block;
   width: 2.7rem;
   height: auto;
-  filter:
-    drop-shadow(0 0 8px rgba(255, 122, 0, 0.1))
-    drop-shadow(0 0 10px rgba(23, 98, 255, 0.14));
 }
 
 .brand-link-mark {
   display: block;
   width: 10.4rem;
   height: auto;
-  filter:
-    drop-shadow(0 0 8px rgba(255, 122, 0, 0.08))
-    drop-shadow(0 0 12px rgba(23, 98, 255, 0.14));
 }
 
 .phase-title {
@@ -580,9 +540,6 @@ textarea:focus {
 .phase-title h1 {
   margin: 0;
   font-size: clamp(1.9rem, 4vw, 3rem);
-  text-shadow:
-    0 0 12px rgba(23, 98, 255, 0.18),
-    0 0 24px rgba(255, 122, 0, 0.08);
 }
 
 .phase-subtitle {
@@ -617,9 +574,8 @@ textarea:focus {
 }
 
 .status-card.wide {
-  background:
-    linear-gradient(160deg, rgba(23, 98, 255, 0.16), rgba(255, 122, 0, 0.1));
-  border-color: rgba(23, 98, 255, 0.24);
+  background: #151515;
+  border-color: var(--panel-border-strong);
 }
 
 .faceoff-board {
@@ -674,13 +630,13 @@ textarea:focus {
 .light-seat {
   background: rgba(255, 122, 0, 0.14);
   color: var(--white-seat);
-  box-shadow: 0 0 16px rgba(255, 122, 0, 0.14);
+  box-shadow: none;
 }
 
 .dark-seat {
   background: rgba(23, 98, 255, 0.14);
   color: var(--dark-seat);
-  box-shadow: 0 0 16px rgba(23, 98, 255, 0.14);
+  box-shadow: none;
 }
 
 .zone-button {
@@ -717,30 +673,20 @@ textarea:focus {
 }
 
 .light-button {
-  background:
-    linear-gradient(165deg, rgba(255, 122, 0, 0.28), rgba(255, 178, 83, 0.08)),
-    linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
+  background: rgba(255, 127, 0, 0.12);
   color: var(--white-seat);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 178, 83, 0.1),
-    0 0 28px rgba(255, 122, 0, 0.1);
+  box-shadow: none;
 }
 
 .dark-button {
-  background:
-    linear-gradient(165deg, rgba(23, 98, 255, 0.24), rgba(116, 174, 255, 0.08)),
-    linear-gradient(180deg, rgba(11, 19, 24, 0.96), rgba(5, 10, 14, 0.98));
+  background: rgba(17, 103, 255, 0.12);
   color: var(--dark-seat);
-  box-shadow:
-    inset 0 0 0 1px rgba(116, 174, 255, 0.1),
-    0 0 28px rgba(23, 98, 255, 0.1);
+  box-shadow: none;
 }
 
 .zone-button.active-turn {
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.08),
-    0 0 40px rgba(23, 98, 255, 0.2);
-  animation: pulse 1.6s ease-in-out infinite;
+  box-shadow: inset 0 0 0 2px currentColor;
+  animation: none;
 }
 
 .active-zone .zone-inner {
@@ -791,7 +737,7 @@ textarea:focus {
 .modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(2, 8, 14, 0.72);
+  background: rgba(0, 0, 0, 0.82);
   backdrop-filter: blur(6px);
 }
 
@@ -799,8 +745,7 @@ textarea:focus {
   position: relative;
   z-index: 1;
   width: min(760px, 100%);
-  background:
-    linear-gradient(180deg, rgba(14, 18, 30, 0.98), rgba(4, 7, 14, 0.98));
+  background: #111111;
   box-shadow: var(--shadow);
 }
 
@@ -832,20 +777,19 @@ textarea:focus {
 
 .hero-rules h1 {
   margin: 0;
-  font-size: clamp(2.8rem, 6vw, 4.7rem);
-  line-height: 0.94;
-  text-shadow:
-    0 0 12px rgba(23, 98, 255, 0.18),
-    0 0 30px rgba(255, 122, 0, 0.08);
+  font-size: clamp(2.25rem, 4.8vw, 3.8rem);
+  line-height: 0.98;
 }
 
 .hero-home h1 {
   margin: 0;
-  font-size: clamp(2.9rem, 6.4vw, 5.2rem);
-  line-height: 0.93;
-  text-shadow:
-    0 0 12px rgba(23, 98, 255, 0.18),
-    0 0 32px rgba(255, 122, 0, 0.1);
+  font-size: clamp(2.15rem, 4.8vw, 3.9rem);
+  line-height: 0.98;
+}
+
+.lead {
+  font-size: clamp(1rem, 1.9vw, 1.18rem);
+  line-height: 1.5;
 }
 
 .hero-actions {
@@ -868,12 +812,9 @@ textarea:focus {
 .source-card {
   position: relative;
   border-radius: 24px;
-  border: 1px solid var(--panel-border-soft);
-  background:
-    linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96));
-  box-shadow:
-    inset 0 0 0 1px rgba(23, 98, 255, 0.05),
-    0 0 22px rgba(23, 98, 255, 0.08);
+  border: 1px solid var(--panel-border);
+  background: var(--panel-alt);
+  box-shadow: none;
 }
 
 .metric-chip,
@@ -950,14 +891,7 @@ textarea:focus {
 }
 
 .format-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 1rem;
-  right: 1rem;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--cool), transparent);
-  opacity: 0.7;
+  display: none;
 }
 
 .mini-panel {
@@ -966,12 +900,9 @@ textarea:focus {
   gap: 0.45rem;
   padding: 1rem;
   border-radius: 22px;
-  border: 1px solid var(--panel-border-soft);
-  background:
-    linear-gradient(160deg, rgba(14, 20, 34, 0.96), rgba(5, 9, 16, 0.96));
-  box-shadow:
-    inset 0 0 0 1px rgba(23, 98, 255, 0.05),
-    0 0 22px rgba(23, 98, 255, 0.08);
+  border: 1px solid var(--panel-border);
+  background: var(--panel-alt);
+  box-shadow: none;
 }
 
 .mini-panel p {
@@ -1023,8 +954,8 @@ textarea:focus {
   align-items: center;
   padding: 0.48rem 0.78rem;
   border-radius: 999px;
-  border: 1px solid var(--panel-border-soft);
-  background: linear-gradient(180deg, rgba(7, 26, 40, 0.88), rgba(2, 13, 22, 0.92));
+  border: 1px solid var(--panel-border);
+  background: #151515;
   color: var(--text);
 }
 
@@ -1052,10 +983,8 @@ textarea:focus {
   gap: 0.45rem;
   padding: 1rem;
   border-radius: 22px;
-  border: 1px solid rgba(23, 98, 255, 0.18);
-  background:
-    linear-gradient(145deg, rgba(23, 98, 255, 0.12), rgba(255, 122, 0, 0.08)),
-    linear-gradient(180deg, rgba(3, 14, 23, 0.96), rgba(2, 10, 16, 0.96));
+  border: 1px solid var(--panel-border);
+  background: #151515;
 }
 
 .callout p {
@@ -1102,23 +1031,8 @@ textarea:focus {
 .source-card:hover {
   transform: translateY(-3px);
   text-decoration: none;
-  border-color: rgba(23, 98, 255, 0.34);
-  box-shadow: 0 0 22px rgba(23, 98, 255, 0.1);
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    box-shadow:
-      0 0 0 1px rgba(255, 255, 255, 0.08),
-      0 0 28px rgba(23, 98, 255, 0.18);
-  }
-
-  50% {
-    box-shadow:
-      0 0 0 1px rgba(255, 255, 255, 0.1),
-      0 0 38px rgba(23, 98, 255, 0.26);
-  }
+  border-color: var(--panel-border-strong);
+  box-shadow: none;
 }
 
 @media (max-width: 1100px) {
@@ -1290,7 +1204,12 @@ textarea:focus {
 
 @media (max-width: 640px) {
   .hero-setup h1 {
-    font-size: 2.7rem;
+    font-size: 2.1rem;
+  }
+
+  .hero-home h1,
+  .hero-rules h1 {
+    font-size: 2rem;
   }
 
   .status-card {