From d6ff71640aaf740d1d87bb830e72be878cf20544 Mon Sep 17 00:00:00 2001
From: Allison <allison@innova-ai.net>
Date: Wed, 29 Apr 2026 10:32:25 -0400
Subject: [PATCH] fix(marketing): phone shell border/shadow/glow STATIC (ne
 morphe plus entre modes)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le perception "le contour change" venait de 4 propriétés tintées par activeColor
sur le phone-shell : border (${activeColor}40), box-shadow (${activeColor}30),
ambient overlay (${activeColor}08), external glow ring (${activeColor}28).

À chaque switch de mode, ces 4 valeurs s'animaient en couleur → halo qui morphe
visuellement même si width/height restent fixes.

Fix : verrouille border/shadow/glow ring/ambient à des valeurs STATIQUES
(white/[0.10] border, brand-b1 0.20 shadow halo, white/[0.015] ambient,
brand-b1 0.18 glow ring) — comme un vrai téléphone, le bezel ne change
JAMAIS de couleur. Seul le contenu interne (modes, feature info card,
boutons feature) reste tinté par activeColor.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 templates/marketing/fonctionnalites.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/marketing/fonctionnalites.html b/templates/marketing/fonctionnalites.html
index 7df6386..8ae0f6f 100644
--- a/templates/marketing/fonctionnalites.html
+++ b/templates/marketing/fonctionnalites.html
@@ -511,18 +511,18 @@
         {# Phone shell (bezel, glow ring, drop shadow) — LARGEUR/HAUTEUR FIXES pour stabilité du cadre #}
         <div class="relative mx-auto dictia-phone-wrap" style="width: 280px; max-width: 100%;">
 
-          {# External glow ring (pulse) #}
+          {# External glow ring (pulse) — STATIC brand-b1 halo, ne change PAS selon mode pour stabilité visuelle du contour #}
           <div class="absolute -inset-2 pointer-events-none dictia-phone-glow-ring"
-               :style="`border-radius: 52px; background: radial-gradient(ellipse 80% 90% at 50% 50%, ${activeColor}28 0%, transparent 60%); transition: background 0.4s;`"
+               style="border-radius: 52px; background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(37,99,235,0.18) 0%, transparent 60%);"
                aria-hidden="true"></div>
 
+          {# Phone shell — bezel/border/shadow STATIQUES (couleur ne change jamais entre modes — comme un vrai téléphone) #}
           <div class="dictia-phone-shell flex flex-col overflow-hidden relative"
-               style="width: 280px; height: 580px;"
-               :style="`border: 1.5px solid ${activeColor}40; background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px ${activeColor}30, inset 0 0 32px ${activeColor}10; transition: border-color 0.4s, box-shadow 0.4s;`">
+               style="width: 280px; height: 580px; border: 1.5px solid rgba(255,255,255,0.10); background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px rgba(37,99,235,0.20), inset 0 0 32px rgba(255,255,255,0.04);">
 
-            {# Ambient color tint overlay #}
+            {# Ambient overlay — STATIC subtle (pas de tint par mode) #}
             <div class="absolute inset-0 pointer-events-none"
-                 :style="`border-radius: 44px; background-color: ${activeColor}08; transition: background-color 0.4s;`"
+                 style="border-radius: 44px; background-color: rgba(255,255,255,0.015);"
                  aria-hidden="true"></div>
 
             {# Notch / Dynamic Island (desktop only via mobile media) #}