diff --git a/apps/api/app/mails/_layout.tsx b/apps/api/app/mails/_layout.tsx
index 21d0033..a572071 100644
--- a/apps/api/app/mails/_layout.tsx
+++ b/apps/api/app/mails/_layout.tsx
@@ -45,12 +45,48 @@ export function EmailLayout({
 }: LayoutProps) {
   return (
     <Html lang="fr">
-      <Head />
+      <Head>
+        {/*
+         * Force le mode clair sur les clients qui auto-invertissent en dark mode
+         * (iOS Mail, Gmail mobile, Outlook.com web). Sans ces tags, les fonds
+         * crème/blanc deviennent noirs et le header rubis-deep devient rose pâle.
+         */}
+        <meta name="color-scheme" content="light only" />
+        <meta name="supported-color-schemes" content="light only" />
+        <style
+          // eslint-disable-next-line react/no-danger -- nécessaire dans <style>
+          dangerouslySetInnerHTML={{
+            __html: `
+              :root {
+                color-scheme: light only;
+                supported-color-schemes: light only;
+              }
+              /* Outlook.com / Hotmail dark mode — force nos couleurs */
+              [data-ogsc] body,
+              [data-ogsb] body {
+                background-color: ${BRAND.cream} !important;
+              }
+              [data-ogsc] .rubis-container,
+              [data-ogsb] .rubis-container {
+                background-color: ${BRAND.white} !important;
+              }
+              [data-ogsc] .rubis-header,
+              [data-ogsb] .rubis-header {
+                background-color: ${BRAND.rubisDeep} !important;
+              }
+              [data-ogsc] .rubis-footer,
+              [data-ogsb] .rubis-footer {
+                background-color: ${BRAND.cream2} !important;
+              }
+            `,
+          }}
+        />
+      </Head>
       <Preview>{preview}</Preview>
-      <Body style={bodyStyle}>
-        <Container style={containerStyle}>
+      <Body style={bodyStyle} className="rubis-body">
+        <Container style={containerStyle} className="rubis-container">
           {/* Bandeau rubis-deep avec gem ◆ + brand */}
-          <Section style={headerStyle}>
+          <Section style={headerStyle} className="rubis-header">
             <Row>
               <Column style={{ verticalAlign: 'middle' }}>
                 <Text style={headerBrandStyle}>
@@ -68,7 +104,7 @@ export function EmailLayout({
           <Section style={contentStyle}>{children}</Section>
 
           {/* Footer Rubis — "Rubis sur l'ongle" cliquable vers la landing */}
-          <Section style={footerStyle}>
+          <Section style={footerStyle} className="rubis-footer">
             <Text style={footerTextStyle}>
               Émis via{' '}
               {landingUrl ? (
