Correction de la lisibilité des textes et du contraste sur la page d'accueil

frontend/src/components/landing/hero-visual.tsx

@@ -443,7 +443,7 @@ function WordDocumentSheet({ data }: { data: RecipeData }) {
           <ShieldCheck className="w-3.5 h-3.5" />
           <span>{data.guaranteeText}</span>
         </div>
-        <div className="text-[#1A1A1A]/40 dark:text-white/40 font-mono">
+        <div className="text-[#1A1A1A]/70 dark:text-white/60 font-mono">
           Wordly Engine • Microsoft Word XML
         </div>
       </div>
@@ -471,7 +471,7 @@ function ExcelDocumentSheet({ data }: { data: RecipeData }) {
       {/* Grille Excel avec entêtes de colonnes A, B, C, D */}
       <div className="border border-[#107C41]/30 dark:border-white/15 rounded overflow-hidden shadow-xs my-auto">
         {/* Ligne des colonnes A B C D */}
-        <div className="grid grid-cols-12 bg-[#F3F2F1] dark:bg-[#2D2D2D] border-b border-black/10 dark:border-white/10 text-[10.5px] font-mono font-bold text-center text-[#1A1A1A]/60 dark:text-white/60 divide-x divide-black/10 dark:divide-white/10">
+        <div className="grid grid-cols-12 bg-[#F3F2F1] dark:bg-[#2D2D2D] border-b border-black/10 dark:border-white/10 text-[10.5px] font-mono font-bold text-center text-[#1A1A1A]/75 dark:text-white/70 divide-x divide-black/10 dark:divide-white/10">
           <div className="col-span-1 py-1 bg-[#E1DFDD] dark:bg-[#383838]">#</div>
           <div className="col-span-4 py-1">A ({data.excelHeaders[0]})</div>
           <div className="col-span-2 py-1">B ({data.excelHeaders[1]})</div>
@@ -481,7 +481,7 @@ function ExcelDocumentSheet({ data }: { data: RecipeData }) {
 
         {/* Ligne 1 : Titre fusionné */}
         <div className="grid grid-cols-12 bg-[#107C41]/10 dark:bg-[#107C41]/20 border-b border-black/10 dark:border-white/10 divide-x divide-black/10 dark:divide-white/10 items-center">
-          <div className="col-span-1 py-1.5 text-center font-mono text-[10.5px] font-bold bg-[#F3F2F1] dark:bg-[#2D2D2D] text-[#1A1A1A]/60 dark:text-white/60">
+          <div className="col-span-1 py-1.5 text-center font-mono text-[10.5px] font-bold bg-[#F3F2F1] dark:bg-[#2D2D2D] text-[#1A1A1A]/75 dark:text-white/70">
             1
           </div>
           <div className="col-span-11 px-3 py-1.5 font-serif font-bold text-[13px] text-[#107C41] dark:text-[#52D886] truncate">
@@ -495,7 +495,7 @@ function ExcelDocumentSheet({ data }: { data: RecipeData }) {
             key={rIdx}
             className="grid grid-cols-12 border-b border-black/[0.06] dark:border-white/[0.06] divide-x divide-black/[0.06] dark:divide-white/[0.06] text-[11.5px] items-center hover:bg-black/[0.02]"
           >
-            <div className="col-span-1 py-1 text-center font-mono text-[10.5px] font-semibold bg-[#F3F2F1] dark:bg-[#2D2D2D] text-[#1A1A1A]/50 dark:text-white/50">
+            <div className="col-span-1 py-1 text-center font-mono text-[10.5px] font-semibold bg-[#F3F2F1] dark:bg-[#2D2D2D] text-[#1A1A1A]/70 dark:text-white/60">
               {rIdx + 2}
             </div>
             <div className="col-span-4 px-2 py-1 font-medium text-[#1A1A1A] dark:text-white truncate">
@@ -507,7 +507,7 @@ function ExcelDocumentSheet({ data }: { data: RecipeData }) {
             <div className="col-span-2 px-2 py-1 text-center text-[#8B6F47] dark:text-[#C5A17A] truncate">
               {row[2]}
             </div>
-            <div className="col-span-3 px-2 py-1 text-[#1A1A1A]/80 dark:text-white/80 truncate">
+            <div className="col-span-3 px-2 py-1 text-[#1A1A1A]/85 dark:text-white/80 truncate">
               {row[3]}
             </div>
           </div>
@@ -515,7 +515,7 @@ function ExcelDocumentSheet({ data }: { data: RecipeData }) {
 
         {/* Ligne de total / formule */}
         <div className="grid grid-cols-12 bg-[#F3F2F1]/70 dark:bg-[#252525] divide-x divide-black/10 dark:divide-white/10 items-center font-bold text-[11px]">
-          <div className="col-span-1 py-1 text-center font-mono text-[10.5px] bg-[#E1DFDD] dark:bg-[#383838] text-[#1A1A1A]/60 dark:text-white/60">
+          <div className="col-span-1 py-1 text-center font-mono text-[10.5px] bg-[#E1DFDD] dark:bg-[#383838] text-[#1A1A1A]/75 dark:text-white/70">
             7
           </div>
           <div className="col-span-6 px-3 py-1 text-[#107C41] dark:text-[#52D886] truncate">
@@ -532,7 +532,7 @@ function ExcelDocumentSheet({ data }: { data: RecipeData }) {
         <div className="px-3 py-1 bg-white dark:bg-[#2A2A2A] border-t-2 border-[#107C41] font-bold text-[#107C41] dark:text-[#42CA78] shadow-xs">
           Feuil1_Recette
         </div>
-        <div className="px-3 py-1 text-[#1A1A1A]/50 dark:text-white/50">
+        <div className="px-3 py-1 text-[#1A1A1A]/70 dark:text-white/60">
           Feuil2_Calculs
         </div>
         <div className="ml-auto text-[11px] text-[#107C41] dark:text-[#42CA78] font-semibold flex items-center gap-1">
@@ -593,7 +593,7 @@ function PptxDocumentSheet({ data }: { data: RecipeData }) {
           <ShieldCheck className="w-3.5 h-3.5" />
           Blocs textes & vecteurs PowerPoint préservés
         </span>
-        <span className="text-[#1A1A1A]/40 dark:text-white/40 font-mono">
+        <span className="text-[#1A1A1A]/60 dark:text-white/50 font-mono">
           Affichage Normal • 100%
         </span>
       </div>
@@ -613,9 +613,9 @@ function PdfDocumentSheet({ data }: { data: RecipeData }) {
           <span className="px-2 py-0.5 bg-white dark:bg-[#181818] rounded font-bold text-[#E03E2D]">
             PDF/A-1b
           </span>
-          <span className="text-[#1A1A1A]/70 dark:text-white/70">Page 1 / 1</span>
+          <span className="text-[#1A1A1A]/80 dark:text-white/70">Page 1 / 1</span>
         </div>
-        <div className="flex items-center gap-3 text-[#1A1A1A]/60 dark:text-white/60">
+        <div className="flex items-center gap-3 text-[#1A1A1A]/75 dark:text-white/60">
           <span className="flex items-center gap-1"><ZoomIn className="w-3 h-3" /> 100%</span>
           <span className="flex items-center gap-1"><Printer className="w-3 h-3" /> Vectoriel</span>
         </div>
@@ -642,23 +642,23 @@ function PdfDocumentSheet({ data }: { data: RecipeData }) {
               <span className="font-bold text-[#E03E2D] block mb-1">{data.ingredientsHeading}</span>
               {data.ingredients.slice(0, 3).map((ing, i) => (
                 <div key={i} className="flex justify-between py-0.5">
-                  <span>{ing.name}</span>
-                  <span className="font-mono font-bold">{ing.amount}</span>
+                  <span className="text-[#1A1A1A] dark:text-[#E0E0E0]">{ing.name}</span>
+                  <span className="font-mono font-bold text-[#8B6F47] dark:text-[#C5A17A]">{ing.amount}</span>
                 </div>
               ))}
             </div>
             <div className="p-2.5 rounded bg-[#FAF8F5] dark:bg-[#181818] border border-black/5 dark:border-white/5">
               <span className="font-bold text-[#E03E2D] block mb-1">{data.stepsHeading}</span>
               {data.steps.slice(0, 2).map((st, i) => (
-                <div key={i} className="py-0.5 leading-snug">
-                  <strong>{st.num}.</strong> {st.desc}
+                <div key={i} className="py-0.5 leading-snug text-[#1A1A1A]/85 dark:text-[#D5D5D5]">
+                  <strong className="text-[#1A1A1A] dark:text-white">{st.num}.</strong> {st.desc}
                 </div>
               ))}
             </div>
           </div>
         </div>
 
-        <div className="pt-2 border-t border-black/10 dark:border-white/10 flex justify-between items-center text-[10.5px] text-[#1A1A1A]/50 dark:text-white/50 font-mono">
+        <div className="pt-2 border-t border-black/10 dark:border-white/10 flex justify-between items-center text-[10.5px] text-[#1A1A1A]/70 dark:text-white/60 font-mono">
           <span>Adobe PostScript • Calque vectoriel préservé</span>
           <span className="text-[#E03E2D] font-bold">100% Fidélité PDF</span>
         </div>
@@ -819,7 +819,7 @@ export function HeroVisual() {
                     'flex items-center gap-1.5 px-2.5 py-1 rounded text-[11.5px] font-bold font-mono transition-all duration-200 cursor-pointer border',
                     isSelected
                       ? 'bg-white dark:bg-[#303030] text-[#1A1A1A] dark:text-white border-black/15 dark:border-white/20 shadow-xs ring-1 ring-black/5'
-                      : 'border-transparent text-[#1A1A1A]/60 dark:text-white/60 hover:bg-black/5 dark:hover:bg-white/5'
+                      : 'border-transparent text-[#1A1A1A]/75 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/5'
                   )}
                   title={`Basculer vers le format ${item.label}`}
                 >
@@ -831,7 +831,7 @@ export function HeroVisual() {
           </div>
 
           {/* Outils du ruban (Police, Gras, Italique, Alignement) */}
-          <div className="hidden lg:flex items-center gap-2 pl-3 border-l border-black/10 dark:border-white/10 text-[#1A1A1A]/70 dark:text-white/70">
+          <div className="hidden lg:flex items-center gap-2 pl-3 border-l border-black/10 dark:border-white/10 text-[#1A1A1A]/80 dark:text-white/80">
             <div className="flex items-center gap-1 px-2 py-0.5 rounded bg-white dark:bg-[#2A2A2A] border border-black/10 text-[11px] font-mono">
               <span>{format === 'docx' ? 'Calibri' : format === 'xlsx' ? 'Segoe UI' : 'Arial'}</span>
               <ChevronDown className="w-3 h-3" />
@@ -866,7 +866,7 @@ export function HeroVisual() {
                       'px-2 py-0.5 rounded text-[11px] font-bold font-mono transition-all duration-200 cursor-pointer',
                       isActive
                         ? 'bg-[#C5A17A] text-white shadow-xs'
-                        : 'text-[#1A1A1A]/60 dark:text-white/60 hover:text-[#1A1A1A] dark:hover:text-white'
+                        : 'text-[#1A1A1A]/75 dark:text-white/70 hover:text-[#1A1A1A] dark:hover:text-white'
                     )}
                   >
                     {r.lang}
@@ -881,7 +881,7 @@ export function HeroVisual() {
         {/* 3. RÈGLE GRADUÉE WORD (Visible en mode .docx)                 */}
         {/* ============================================================ */}
         {format === 'docx' && (
-          <div className="hidden sm:flex items-center justify-between px-8 py-0.5 bg-[#FAF8F5] dark:bg-[#1A1A1A] border-b border-black/[0.06] dark:border-white/[0.06] text-[9.5px] font-mono text-[#1A1A1A]/40 dark:text-white/40">
+          <div className="hidden sm:flex items-center justify-between px-8 py-0.5 bg-[#FAF8F5] dark:bg-[#1A1A1A] border-b border-black/[0.06] dark:border-white/[0.06] text-[9.5px] font-mono text-[#1A1A1A]/60 dark:text-white/60">
             <span>◄ 0</span>
             <span>2</span>
             <span>4</span>

frontend/src/components/landing/landing-page.tsx

@@ -217,17 +217,17 @@ const LayoutFeatures = () => {
   // Deux vraies pages de document : même structure, deux langues.
   // Le terme en gras montre le respect de la terminologie (glossaire).
   const DocPage = ({ side }: { side: "source" | "target" }) => (
-    <div className="flex flex-col rounded-2xl bg-white p-8 text-start shadow-2xl dark:bg-[#181818] lg:p-10">
-      <span className={`mb-6 w-fit rounded-full border px-3 py-1 text-[10px] font-black uppercase tracking-widest ${side === "source" ? "border-black/10 text-brand-dark/50 dark:border-white/15 dark:text-white/50" : "border-brand-accent/40 bg-brand-accent/10 text-brand-goldink dark:text-brand-accent"}`}>
+    <div className="flex flex-col rounded-2xl bg-white p-8 text-start shadow-xl border border-black/5 dark:border-white/10 dark:bg-[#181818] lg:p-10">
+      <span className={`mb-6 w-fit rounded-full border px-3 py-1 text-[10px] font-black uppercase tracking-widest ${side === "source" ? "border-black/10 text-brand-dark/60 dark:border-white/15 dark:text-white/60" : "border-brand-accent/40 bg-brand-accent/10 text-brand-goldink dark:text-brand-accent"}`}>
         {side === "source" ? "FR — original" : "EN — traduit"}
       </span>
       <h4 className="mb-4 font-serif text-xl font-medium tracking-tight text-brand-dark dark:text-white lg:text-2xl">
         {side === "source" ? t("landing.beforeAfter.sourceTitle") : t("landing.beforeAfter.targetTitle")}
       </h4>
-      <p className="mb-4 text-sm leading-relaxed text-brand-dark/75 dark:text-white/75">
+      <p className="mb-4 text-sm leading-relaxed text-brand-dark/85 dark:text-white/80">
         {side === "source" ? t("landing.beforeAfter.sourcePara1") : t("landing.beforeAfter.targetPara1")}
       </p>
-      <p className="mb-6 text-sm leading-relaxed text-brand-dark/75 dark:text-white/75">
+      <p className="mb-6 text-sm leading-relaxed text-brand-dark/85 dark:text-white/80">
         {side === "source" ? (
           <>
             {t("landing.beforeAfter.sourcePara2Before")}{" "}
@@ -242,7 +242,7 @@ const LayoutFeatures = () => {
           </>
         )}
       </p>
-      <ul className="mb-8 space-y-2 text-sm text-brand-dark/75 dark:text-white/75">
+      <ul className="mb-8 space-y-2 text-sm text-brand-dark/85 dark:text-white/80">
         <li className="flex items-start gap-2">
           <span className="mt-2 size-1 shrink-0 rounded-full bg-brand-accent" />
           {side === "source" ? t("landing.beforeAfter.sourceItem1") : t("landing.beforeAfter.targetItem1")}
@@ -253,20 +253,20 @@ const LayoutFeatures = () => {
         </li>
       </ul>
       <div className="mt-auto flex items-center justify-between border-t border-black/[0.06] pt-4 dark:border-white/[0.08]">
-        <span className="font-mono text-[10px] uppercase tracking-wider text-brand-dark/45 dark:text-white/45">cahier-des-charges.docx</span>
-        <span className="font-mono text-[10px] uppercase tracking-wider text-brand-dark/45 dark:text-white/45">3 pages · 2 481 mots</span>
+        <span className="font-mono text-[10px] uppercase tracking-wider text-brand-dark/60 dark:text-white/60">cahier-des-charges.docx</span>
+        <span className="font-mono text-[10px] uppercase tracking-wider text-brand-dark/60 dark:text-white/60">3 pages · 2 481 mots</span>
       </div>
     </div>
   );
 
   return (
-    <section id="features" className="px-4 py-32 text-white">
+    <section id="fidelity" className="px-4 py-32 bg-brand-muted/20 dark:bg-[#1a1a1a]/20 border-y border-black/5 dark:border-white/5">
       <div className="mx-auto max-w-7xl">
         <div className="mb-16 text-center">
-          <h2 className="mb-8 font-serif text-4xl font-medium leading-tight tracking-tight md:text-6xl">
+          <h2 className="mb-8 font-serif text-4xl font-medium leading-tight tracking-tight text-brand-dark dark:text-white md:text-6xl">
             {t("landing.layout.title")}<br /> <span className="italic">{t("landing.layout.title2")}</span>
           </h2>
-          <p className="mx-auto max-w-2xl text-xl font-light tracking-wide text-white/45">
+          <p className="mx-auto max-w-2xl text-xl font-light tracking-wide text-brand-dark/60 dark:text-white/60">
             {t("landing.layout.subtitle")}
           </p>
         </div>
@@ -277,9 +277,9 @@ const LayoutFeatures = () => {
 
           {/* sceau central : la promesse, entre les deux pages */}
           <div className="pointer-events-none absolute inset-0 hidden items-center justify-center md:flex">
-            <div className="flex items-center gap-2 rounded-full border border-brand-accent/40 bg-brand-dark px-5 py-2.5 shadow-2xl dark:bg-[#0a0a0a]">
-              <CheckCircle2 size={14} className="text-brand-accent" />
-              <span className="text-[10px] font-black uppercase tracking-widest text-brand-accent">
+            <div className="flex items-center gap-2 rounded-full border border-brand-accent/40 bg-white dark:bg-[#0a0a0a] px-5 py-2.5 shadow-2xl">
+              <CheckCircle2 size={14} className="text-brand-goldink dark:text-brand-accent" />
+              <span className="text-[10px] font-black uppercase tracking-widest text-brand-goldink dark:text-brand-accent">
                 {t("landing.beforeAfter.seal")}
               </span>
             </div>
@@ -293,11 +293,11 @@ const LayoutFeatures = () => {
             { icon: <PieChart size={16} />, label: t("landing.beforeAfter.proof2") },
             { icon: <MessageSquare size={16} />, label: t("landing.beforeAfter.proof3") },
           ].map((proof, i) => (
-            <div key={i} className="flex items-center gap-3 rounded-2xl border border-white/10 px-5 py-4">
-              <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-brand-accent/30 text-brand-accent">
+            <div key={i} className="flex items-center gap-3 rounded-2xl border border-black/10 dark:border-white/10 bg-white/80 dark:bg-white/5 px-5 py-4 shadow-sm">
+              <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-brand-accent/30 bg-brand-accent/10 text-brand-goldink dark:text-brand-accent">
                 {proof.icon}
               </span>
-              <span className="text-sm font-light text-white/70">{proof.label}</span>
+              <span className="text-sm font-medium text-brand-dark/80 dark:text-white/75">{proof.label}</span>
             </div>
           ))}
         </div>
@@ -421,8 +421,8 @@ const PricingSection = () => {
 
               <ul className="space-y-6 mb-16 flex-grow">
                 {p.features.map((f, j) => (
-                  <li key={j} className="flex items-start gap-4 text-sm text-brand-dark/50 dark:text-white/50 font-medium leading-snug">
-                    <div className="w-1 h-1 rounded-full bg-brand-accent mt-2 shrink-0"></div> <span className="font-light">{f}</span>
+                  <li key={j} className="flex items-start gap-4 text-sm text-brand-dark/80 dark:text-white/80 font-normal leading-snug">
+                    <div className="w-1 h-1 rounded-full bg-brand-accent mt-2 shrink-0"></div> <span>{f}</span>
                   </li>
                 ))}
               </ul>
@@ -437,7 +437,7 @@ const PricingSection = () => {
           ))}
         </div>
 
-        <p className="text-center mt-12 text-brand-dark/50 dark:text-white/50 text-xs font-bold uppercase tracking-widest">{t('landing.pricing.footer')}</p>
+        <p className="text-center mt-12 text-brand-dark/60 dark:text-white/60 text-xs font-bold uppercase tracking-widest">{t('landing.pricing.footer')}</p>
       </div>
     </section>
   );