From ecdaf195839cbb1007e42e099134cb72d0ddc9ee Mon Sep 17 00:00:00 2001
From: Adam Belkacemi <adam@belkacemi.me>
Date: Mon, 21 Sep 2026 21:43:31 +0200
Subject: [PATCH] Fond de connexion : couleurs nettement plus vives + fix cache
 navigateur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fond génératif beaucoup plus lumineux et coloré (base par scène,
  taches plus grandes/saturées, scrim réduit à un dégradé directionnel
  léger côté texte) - le premier essai était encore jugé trop sombre/
  invisible par l'utilisateur.
- Cause réelle du "rien n'a changé" : le Caddyfile ne fixait aucun
  Cache-Control, donc le navigateur appliquait sa propre heuristique et
  gardait l'ancien index.html en cache après un déploiement. Corrigé
  sur le serveur (Caddyfile) et documenté dans
  tripoli-edge/deploy/Caddyfile.snippet : `no-cache` sur index.html
  (revalidation à chaque chargement), cache long `immutable` sur
  /assets/* (noms hachés par Vite, donc sans risque).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/src/components/auth/AuthBackground.tsx | 16 ++++----
 app/src/components/auth/AuthLayout.tsx     |  2 +-
 app/src/lib/backgrounds.ts                 | 36 +++++++++++-------
 tripoli-edge/deploy/Caddyfile.snippet      | 44 ++++++++++++++++++++--
 4 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/app/src/components/auth/AuthBackground.tsx b/app/src/components/auth/AuthBackground.tsx
index 5a6617f..24e1ed1 100644
--- a/app/src/components/auth/AuthBackground.tsx
+++ b/app/src/components/auth/AuthBackground.tsx
@@ -5,17 +5,17 @@ export function AuthBackground() {
   const activeIndex = useBackgroundCrossfade();
 
   return (
-    <div className="absolute inset-0 overflow-hidden bg-[#07080c]">
+    <div className="absolute inset-0 overflow-hidden bg-[#120f24]">
       {BACKGROUND_SCENES.map((scene, i) => (
         <div
           key={scene.id}
           className="absolute inset-0 transition-opacity duration-[2400ms] ease-in-out"
-          style={{ opacity: i === activeIndex ? 1 : 0 }}
+          style={{ opacity: i === activeIndex ? 1 : 0, background: scene.base }}
         >
           {scene.blobs.map((blob, bi) => (
             <div
               key={bi}
-              className="tc-drift absolute rounded-full blur-[90px]"
+              className="tc-drift absolute rounded-full blur-[80px]"
               style={{
                 top: blob.top,
                 left: blob.left,
@@ -31,18 +31,16 @@ export function AuthBackground() {
 
       {/* Grain léger : casse l'effet "dégradé plat", donne une texture
           plus organique - technique courante sur les fonds génératifs. */}
-      <svg className="absolute inset-0 h-full w-full opacity-[0.05] mix-blend-overlay" aria-hidden="true">
+      <svg className="absolute inset-0 h-full w-full opacity-[0.06] mix-blend-overlay" aria-hidden="true">
         <filter id="tc-grain">
           <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
         </filter>
         <rect width="100%" height="100%" filter="url(#tc-grain)" />
       </svg>
 
-      {/* Scrim en deux passes : un voile uniforme (garantit le contraste du
-          texte quelle que soit la position des taches de couleur) plus un
-          dégradé directionnel plus marqué côté texte. */}
-      <div className="absolute inset-0 bg-[#07080c]/48" />
-      <div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.74)_0%,rgba(6,7,11,0.44)_46%,rgba(6,7,11,0.22)_100%)]" />
+      {/* Assombrit seulement côté texte (gauche) - le reste du fond reste
+          vif et visible, pas noyé sous un voile uniforme. */}
+      <div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(9,7,18,0.66)_0%,rgba(9,7,18,0.28)_38%,transparent_66%)]" />
     </div>
   );
 }
diff --git a/app/src/components/auth/AuthLayout.tsx b/app/src/components/auth/AuthLayout.tsx
index 40ac716..a6f3285 100644
--- a/app/src/components/auth/AuthLayout.tsx
+++ b/app/src/components/auth/AuthLayout.tsx
@@ -4,7 +4,7 @@ import { TripoliLogo, TripoliWordmark } from '../layout/TripoliLogo';
 
 export function AuthLayout() {
   return (
-    <div className="relative min-h-screen overflow-hidden bg-[#07080c]">
+    <div className="relative min-h-screen overflow-hidden bg-[#120f24]">
       <AuthBackground />
 
       <div className="relative flex min-h-screen flex-col justify-between gap-11 p-6 sm:p-10 lg:p-[60px]">
diff --git a/app/src/lib/backgrounds.ts b/app/src/lib/backgrounds.ts
index 8d2ff6e..c2136d9 100644
--- a/app/src/lib/backgrounds.ts
+++ b/app/src/lib/backgrounds.ts
@@ -1,9 +1,9 @@
 /**
- * Scènes du diaporama de fond de l'écran de connexion : de l'art génératif
- * (pas de photo tierce, pour rester libre de droits) - deux à trois taches
- * de couleur douces, floutées, qui dérivent lentement (voir `.tc-drift`
- * dans index.css) et s'enchaînent en fondu. Palette "zen" volontairement
- * sourde : jamais de couleur saturée à pleine opacité.
+ * Scènes du diaporama de fond de l'écran de connexion : art génératif
+ * (pas de photo tierce, pour rester libre de droits) - de larges taches de
+ * couleur saturées, floutées, qui dérivent lentement (voir `.tc-drift` dans
+ * index.css) et s'enchaînent en fondu. Volontairement lumineux et coloré,
+ * pas "noir avec une pointe de couleur" - le fond DOIT se voir.
  */
 export interface BackgroundBlob {
   color: string;
@@ -14,36 +14,46 @@ export interface BackgroundBlob {
 
 export interface BackgroundScene {
   id: string;
+  /** Couleur de base de la scène - un dégradé de fond, pas du noir plat. */
+  base: string;
   blobs: BackgroundBlob[];
 }
 
 export const BACKGROUND_SCENES: BackgroundScene[] = [
   {
     id: 'aube',
+    base: 'linear-gradient(160deg, #241a3d 0%, #171029 60%, #0d0a18 100%)',
     blobs: [
-      { color: 'rgba(123,148,255,0.42)', top: '-12%', left: '58%', size: '56vw' },
-      { color: 'rgba(255,168,140,0.24)', top: '52%', left: '2%', size: '44vw' },
+      { color: 'rgba(140,163,255,0.62)', top: '-18%', left: '52%', size: '62vw' },
+      { color: 'rgba(255,140,163,0.42)', top: '46%', left: '-6%', size: '52vw' },
+      { color: 'rgba(255,196,120,0.28)', top: '62%', left: '62%', size: '40vw' },
     ],
   },
   {
     id: 'nuit',
+    base: 'linear-gradient(160deg, #1c1740 0%, #130f2c 60%, #0b0918 100%)',
     blobs: [
-      { color: 'rgba(91,102,255,0.38)', top: '-16%', left: '72%', size: '60vw' },
-      { color: 'rgba(124,92,255,0.3)', top: '58%', left: '12%', size: '50vw' },
+      { color: 'rgba(110,120,255,0.58)', top: '-20%', left: '66%', size: '66vw' },
+      { color: 'rgba(163,110,255,0.46)', top: '54%', left: '4%', size: '54vw' },
+      { color: 'rgba(94,214,255,0.22)', top: '4%', left: '2%', size: '36vw' },
     ],
   },
   {
     id: 'foret',
+    base: 'linear-gradient(160deg, #0f2a2e 0%, #0e1f26 60%, #0a1418 100%)',
     blobs: [
-      { color: 'rgba(94,214,170,0.22)', top: '8%', left: '76%', size: '48vw' },
-      { color: 'rgba(53,124,132,0.38)', top: '62%', left: '6%', size: '54vw' },
+      { color: 'rgba(94,224,180,0.48)', top: '2%', left: '70%', size: '54vw' },
+      { color: 'rgba(53,150,166,0.5)', top: '58%', left: '-4%', size: '58vw' },
+      { color: 'rgba(210,255,150,0.2)', top: '70%', left: '68%', size: '38vw' },
     ],
   },
   {
     id: 'braise',
+    base: 'linear-gradient(160deg, #351a2c 0%, #23122a 60%, #130a1a 100%)',
     blobs: [
-      { color: 'rgba(255,186,128,0.26)', top: '-6%', left: '18%', size: '50vw' },
-      { color: 'rgba(179,111,255,0.3)', top: '54%', left: '68%', size: '54vw' },
+      { color: 'rgba(255,176,110,0.5)', top: '-10%', left: '10%', size: '54vw' },
+      { color: 'rgba(210,120,255,0.44)', top: '48%', left: '64%', size: '58vw' },
+      { color: 'rgba(255,120,150,0.26)', top: '68%', left: '10%', size: '40vw' },
     ],
   },
 ];
diff --git a/tripoli-edge/deploy/Caddyfile.snippet b/tripoli-edge/deploy/Caddyfile.snippet
index 55b8927..57cb7fc 100644
--- a/tripoli-edge/deploy/Caddyfile.snippet
+++ b/tripoli-edge/deploy/Caddyfile.snippet
@@ -1,15 +1,26 @@
 # Bloc ajouté à /opt/edge/Caddyfile sur le serveur (fichier partagé avec
 # les 6 autres projets hébergés, donc pas dans ce dépôt en entier — voir
-# le README de ce dossier).
+# le README de ce dossier). Tenu à jour ici pour référence, mais la
+# source de vérité reste le fichier sur le serveur.
 #
 # Pourquoi Caddy et pas tripoli-edge lui-même sur 80/443 : les ports 80 et
 # 443 appartiennent déjà à ce Caddy. tripoli-edge est un service interne
 # (172.17.0.1:9000, passerelle docker0, jamais exposé publiquement) :
-# Caddy fait TLS/ACME et le routage par Host, tripoli-edge fait le reste.
+# Caddy fait TLS/ACME et le routage par Host, tripoli-edge fait le reste
+# via /api/*, /healthz et /metrics.
+#
+# Le frontend (build statique React) est servi directement par Caddy
+# depuis /var/www/tripoli-cloud, sans passer par tripoli-edge.
+#
+# Cache-Control explicite, sans quoi le navigateur applique sa propre
+# heuristique - imprévisible, et découvert à nos dépens : un déploiement
+# de frontend restait invisible pour un navigateur qui avait mis en
+# cache l'ancien index.html. `no-cache` force la revalidation à chaque
+# chargement (le fichier change à chaque déploiement) ; les fichiers
+# sous /assets/ ont un nom haché par leur contenu (Vite), donc peuvent
+# être mis en cache indéfiniment sans risque.
 
 tripoli.cloud, www.tripoli.cloud {
-    reverse_proxy 172.17.0.1:9000
-
     header {
         Strict-Transport-Security "max-age=31536000; includeSubDomains"
         X-Content-Type-Options    "nosniff"
@@ -18,6 +29,31 @@ tripoli.cloud, www.tripoli.cloud {
         -Server
     }
 
+    handle /api/* {
+        reverse_proxy 172.17.0.1:9000
+    }
+
+    handle /healthz {
+        reverse_proxy 172.17.0.1:9000
+    }
+
+    handle /metrics {
+        reverse_proxy 172.17.0.1:9000
+    }
+
+    handle /assets/* {
+        root * /var/www/tripoli-cloud
+        header Cache-Control "public, max-age=31536000, immutable"
+        file_server
+    }
+
+    handle {
+        root * /var/www/tripoli-cloud
+        header Cache-Control "no-cache"
+        try_files {path} /index.html
+        file_server
+    }
+
     log {
         output file /var/log/caddy/tripoli-cloud.log
         format json