From eb248c98b8ce48c72701648ee6dc03397b988891 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Thu, 7 May 2026 22:55:47 +0200
Subject: [PATCH] =?UTF-8?q?style(mail):=20fond=20cr=C3=A8me=20edge-to-edge?=
 =?UTF-8?q?=20(au=20lieu=20d'un=20container=20blanc)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avant : body crème + container blanc avec border-radius + bordure → effet
"card flottante" qui laissait des marges crème en haut/bas et un fond
blanc pour le contenu. Sur iPhone Mail, cette structure créait un gap
mal rendu entre la frame Mail.app et le header rubis-deep.

Maintenant :
- bodyStyle.padding 24px 0 → 0 (rubis-deep colle au haut de la zone mail)
- containerStyle background blanc → crème (toute la zone email est crème,
  cohérente avec la palette)
- containerStyle borderRadius + border supprimés (edge-to-edge)
- invoiceCardStyle (checkin) + summaryCardStyle (relance) passent en
  blanc pour se détacher du nouveau fond crème
- Dark mode CSS : .rubis-container override aussi mis à crème

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/api/app/mails/_layout.tsx       | 11 ++++++-----
 apps/api/app/mails/checkin_email.tsx |  4 +++-
 apps/api/app/mails/relance_email.tsx |  4 +++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/api/app/mails/_layout.tsx b/apps/api/app/mails/_layout.tsx
index a572071..b2e3887 100644
--- a/apps/api/app/mails/_layout.tsx
+++ b/apps/api/app/mails/_layout.tsx
@@ -68,7 +68,7 @@ export function EmailLayout({
               }
               [data-ogsc] .rubis-container,
               [data-ogsb] .rubis-container {
-                background-color: ${BRAND.white} !important;
+                background-color: ${BRAND.cream} !important;
               }
               [data-ogsc] .rubis-header,
               [data-ogsb] .rubis-header {
@@ -134,14 +134,15 @@ const bodyStyle: React.CSSProperties = {
   backgroundColor: BRAND.cream,
   fontFamily: BRAND.fontBody,
   margin: 0,
-  padding: `${sp.xl} 0`,
+  padding: 0,
   color: BRAND.ink,
 }
 
 const containerStyle: React.CSSProperties = {
-  backgroundColor: BRAND.white,
-  borderRadius: BRAND.radiusCard,
-  border: `1px solid ${BRAND.line}`,
+  // Fond crème pour que toute la zone du mail soit dans la palette
+  // (au lieu d'un container blanc flottant sur cream). Le header
+  // rubis-deep et le footer cream2 gardent leur couleur dédiée.
+  backgroundColor: BRAND.cream,
   margin: '0 auto',
   maxWidth: '560px',
   overflow: 'hidden',
diff --git a/apps/api/app/mails/checkin_email.tsx b/apps/api/app/mails/checkin_email.tsx
index c1e15f6..fa6cdda 100644
--- a/apps/api/app/mails/checkin_email.tsx
+++ b/apps/api/app/mails/checkin_email.tsx
@@ -125,7 +125,9 @@ const leadStyle: React.CSSProperties = {
 }
 
 const invoiceCardStyle: React.CSSProperties = {
-  backgroundColor: BRAND.cream,
+  // Blanc sur fond crème pour détacher la card visuellement (avant
+  // c'était crème sur container blanc — maintenant le container est crème).
+  backgroundColor: BRAND.white,
   border: `1px solid ${BRAND.line}`,
   borderRadius: BRAND.radiusCard,
   padding: `${sp.lg} ${sp.xl}`,
diff --git a/apps/api/app/mails/relance_email.tsx b/apps/api/app/mails/relance_email.tsx
index 46c043d..15b1cfc 100644
--- a/apps/api/app/mails/relance_email.tsx
+++ b/apps/api/app/mails/relance_email.tsx
@@ -108,7 +108,9 @@ const bodyTextStyle: React.CSSProperties = {
 }
 
 const summaryCardStyle: React.CSSProperties = {
-  backgroundColor: BRAND.cream,
+  // Blanc sur fond crème pour détacher la card visuellement (le container
+  // du layout est désormais crème, pas blanc).
+  backgroundColor: BRAND.white,
   border: `1px solid ${BRAND.line}`,
   borderRadius: BRAND.radiusCard,
   padding: `${sp.md} ${sp.lg}`,