From 4212e847d4889d19c1301a9ea309ed6750f0742c Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Mon, 2 Mar 2026 13:10:13 +0100
Subject: [PATCH] Sceau Tsing: proportions avatars (1.3:1), emboss CSS, sans
 voile dark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SVG redessiné: viewBox 130×100, traits fins (5u), ratio calé sur Su.svg
- Emboss via CSS drop-shadow au lieu de filtre SVG inline (causait voile)
- Supprimé :global() dans scoped CSS (cause du voile sur dark moods)
- moods.css et useMood.ts inchangés, dark modes intacts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/app/app.vue                    | 30 +++++++++++++++++++
 frontend/public/hexagram-tsing-flat.svg | 20 ++++++-------
 frontend/public/hexagram-tsing.svg      | 40 +++++++++++--------------
 3 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index ba0fd62..9598e14 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -190,6 +190,25 @@ function isActive(to: string) {
           <ErrorBoundary>
             <NuxtPage />
           </ErrorBoundary>
+
+          <!-- 井 Tsing — sceau (proportions calées sur avatars Yvv) -->
+          <svg class="app-seal" viewBox="0 0 130 100" fill="currentColor" aria-hidden="true">
+            <!-- Line 6 (top) — yin -->
+            <rect x="5" y="5" width="49" height="5" rx="1"/>
+            <rect x="76" y="5" width="49" height="5" rx="1"/>
+            <!-- Line 5 — yang -->
+            <rect x="5" y="22" width="120" height="5" rx="1"/>
+            <!-- Line 4 — yin -->
+            <rect x="5" y="39" width="49" height="5" rx="1"/>
+            <rect x="76" y="39" width="49" height="5" rx="1"/>
+            <!-- Line 3 — yang -->
+            <rect x="5" y="56" width="120" height="5" rx="1"/>
+            <!-- Line 2 — yang -->
+            <rect x="5" y="73" width="120" height="5" rx="1"/>
+            <!-- Line 1 (bottom) — yin -->
+            <rect x="5" y="90" width="49" height="5" rx="1"/>
+            <rect x="76" y="90" width="49" height="5" rx="1"/>
+          </svg>
         </main>
       </div>
 
@@ -577,6 +596,17 @@ function isActive(to: string) {
   opacity: 0.3;
 }
 
+/* === Seal — 井 Tsing === */
+.app-seal {
+  display: block;
+  width: 44px;
+  margin: 1.5rem 0 0.5rem auto;
+  color: var(--mood-accent);
+  opacity: 0.28;
+  filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25))
+          drop-shadow(-0.5px -0.5px 0.5px rgba(255,255,255,0.15));
+}
+
 /* === Transitions === */
 .slide-up-enter-active,
 .slide-up-leave-active {
diff --git a/frontend/public/hexagram-tsing-flat.svg b/frontend/public/hexagram-tsing-flat.svg
index 1cf5a83..6ae67eb 100644
--- a/frontend/public/hexagram-tsing-flat.svg
+++ b/frontend/public/hexagram-tsing-flat.svg
@@ -1,12 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 100" fill="currentColor">
   <!-- Hexagram 48 — 井 Tsing — Le Puits (flat) -->
-  <rect x="10" y="10" width="80" height="18" rx="2"/>
-  <rect x="110" y="10" width="80" height="18" rx="2"/>
-  <rect x="10" y="52" width="180" height="18" rx="2"/>
-  <rect x="10" y="94" width="80" height="18" rx="2"/>
-  <rect x="110" y="94" width="80" height="18" rx="2"/>
-  <rect x="10" y="136" width="180" height="18" rx="2"/>
-  <rect x="10" y="178" width="180" height="18" rx="2"/>
-  <rect x="10" y="220" width="80" height="18" rx="2"/>
-  <rect x="110" y="220" width="80" height="18" rx="2"/>
+  <rect x="5" y="5" width="49" height="5" rx="1"/>
+  <rect x="76" y="5" width="49" height="5" rx="1"/>
+  <rect x="5" y="22" width="120" height="5" rx="1"/>
+  <rect x="5" y="39" width="49" height="5" rx="1"/>
+  <rect x="76" y="39" width="49" height="5" rx="1"/>
+  <rect x="5" y="56" width="120" height="5" rx="1"/>
+  <rect x="5" y="73" width="120" height="5" rx="1"/>
+  <rect x="5" y="90" width="49" height="5" rx="1"/>
+  <rect x="76" y="90" width="49" height="5" rx="1"/>
 </svg>
diff --git a/frontend/public/hexagram-tsing.svg b/frontend/public/hexagram-tsing.svg
index b8cee5b..93583eb 100644
--- a/frontend/public/hexagram-tsing.svg
+++ b/frontend/public/hexagram-tsing.svg
@@ -1,29 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 100" fill="currentColor">
   <!-- Hexagram 48 — 井 Tsing — Le Puits -->
   <!-- K'an (Eau) / Souen (Bois) — signature Yvv -->
+  <!-- Proportions calées sur les avatars hexagrammes (ratio ~1.3:1) -->
 
   <defs>
     <filter id="emboss" x="-10%" y="-10%" width="120%" height="120%">
-      <!-- Invert alpha: outside shape = opaque -->
       <feComponentTransfer in="SourceAlpha" result="inv">
         <feFuncA type="table" tableValues="1 0"/>
       </feComponentTransfer>
-
-      <!-- Inset shadow: dark on top-left inner edges -->
-      <feOffset in="inv" dx="4" dy="4" result="sOff"/>
-      <feGaussianBlur in="sOff" stdDeviation="2.5" result="sBlur"/>
-      <feFlood flood-color="#000" flood-opacity="0.35"/>
+      <feOffset in="inv" dx="1.5" dy="1.5" result="sOff"/>
+      <feGaussianBlur in="sOff" stdDeviation="1" result="sBlur"/>
+      <feFlood flood-color="#000" flood-opacity="0.3"/>
       <feComposite in2="sBlur" operator="in" result="sDark"/>
       <feComposite in="sDark" in2="SourceAlpha" operator="in" result="sClip"/>
-
-      <!-- Inset highlight: light on bottom-right inner edges -->
-      <feOffset in="inv" dx="-3" dy="-3" result="hOff"/>
-      <feGaussianBlur in="hOff" stdDeviation="2" result="hBlur"/>
-      <feFlood flood-color="#fff" flood-opacity="0.45"/>
+      <feOffset in="inv" dx="-1" dy="-1" result="hOff"/>
+      <feGaussianBlur in="hOff" stdDeviation="0.8" result="hBlur"/>
+      <feFlood flood-color="#fff" flood-opacity="0.4"/>
       <feComposite in2="hBlur" operator="in" result="hLight"/>
       <feComposite in="hLight" in2="SourceAlpha" operator="in" result="hClip"/>
-
-      <!-- Stack: base shape + shadow + highlight -->
       <feMerge>
         <feMergeNode in="SourceGraphic"/>
         <feMergeNode in="sClip"/>
@@ -34,19 +28,19 @@
 
   <g filter="url(#emboss)">
     <!-- Line 6 (top) — yin -->
-    <rect x="10" y="10" width="80" height="18" rx="2"/>
-    <rect x="110" y="10" width="80" height="18" rx="2"/>
+    <rect x="5" y="5" width="49" height="5" rx="1"/>
+    <rect x="76" y="5" width="49" height="5" rx="1"/>
     <!-- Line 5 — yang -->
-    <rect x="10" y="52" width="180" height="18" rx="2"/>
+    <rect x="5" y="22" width="120" height="5" rx="1"/>
     <!-- Line 4 — yin -->
-    <rect x="10" y="94" width="80" height="18" rx="2"/>
-    <rect x="110" y="94" width="80" height="18" rx="2"/>
+    <rect x="5" y="39" width="49" height="5" rx="1"/>
+    <rect x="76" y="39" width="49" height="5" rx="1"/>
     <!-- Line 3 — yang -->
-    <rect x="10" y="136" width="180" height="18" rx="2"/>
+    <rect x="5" y="56" width="120" height="5" rx="1"/>
     <!-- Line 2 — yang -->
-    <rect x="10" y="178" width="180" height="18" rx="2"/>
+    <rect x="5" y="73" width="120" height="5" rx="1"/>
     <!-- Line 1 (bottom) — yin -->
-    <rect x="10" y="220" width="80" height="18" rx="2"/>
-    <rect x="110" y="220" width="80" height="18" rx="2"/>
+    <rect x="5" y="90" width="49" height="5" rx="1"/>
+    <rect x="76" y="90" width="49" height="5" rx="1"/>
   </g>
 </svg>