From 15d28d3e793a9b06e7919ec0c610eb7e16095ef6 Mon Sep 17 00:00:00 2001
From: Legrand Thomas <18073293+DnzzL@users.noreply.github.com>
Date: Fri, 2 Oct 2026 12:55:35 +0200
Subject: [PATCH 1/2] fix(console): supprimer les erreurs console restantes du
 frontend

`BaseCard` laissait fuiter ses props dans le DOM (`rawDate`, `onSite`) et la
banniere des pages thematiques sans image recevait un `src` vide. Le logo des
financeurs recevait l'objet media au lieu de son URL, donc aucune image ne
s'affichait. Les scripts passent par next/script, six ratios width/height
correspondent a nouveau a la boite rendue, deux index d'animation sont bornes.
---
 frontend/src/app/[locale]/_partials/footer.tsx    |  2 +-
 frontend/src/app/[locale]/_partials/header.tsx    |  2 +-
 .../[locale]/positions/_partials/Animations.tsx   | 14 +++++++-------
 frontend/src/app/layout.tsx                       | 15 +++++++++++----
 .../components/atoms/Pagination/Pagination.tsx    |  4 ++--
 frontend/src/components/atoms/Title/Title.tsx     |  2 +-
 .../components/molecules/BaseCard/BaseCard.tsx    |  2 --
 .../ThematicHeroBlock/ThematicHeroBlock.tsx       |  5 ++++-
 frontend/src/components/ui/carousel.tsx           |  4 ++--
 frontend/src/lib/formatters/thematics.ts          |  2 +-
 10 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/[locale]/_partials/footer.tsx b/frontend/src/app/[locale]/_partials/footer.tsx
index 76a99c290..3e75dbe8c 100644
--- a/frontend/src/app/[locale]/_partials/footer.tsx
+++ b/frontend/src/app/[locale]/_partials/footer.tsx
@@ -54,7 +54,7 @@ const Footer = () => {
                 src="/images/dataforgood.svg"
                 alt={t('title')}
                 width={212}
-                height={48}
+                height={44}
                 className="object-contain"
               />
             </Link>
diff --git a/frontend/src/app/[locale]/_partials/header.tsx b/frontend/src/app/[locale]/_partials/header.tsx
index f43c7d2f7..a97a486b1 100644
--- a/frontend/src/app/[locale]/_partials/header.tsx
+++ b/frontend/src/app/[locale]/_partials/header.tsx
@@ -165,7 +165,7 @@ const Header = () => {
               src="/images/dataforgood.svg"
               alt={t('header.title')}
               width={230}
-              height={43}
+              height={48}
               className="w-[176px] lg:w-[230px] object-contain"
             />
           </Link>
diff --git a/frontend/src/app/[locale]/positions/_partials/Animations.tsx b/frontend/src/app/[locale]/positions/_partials/Animations.tsx
index f9a2cc285..c85dacf1f 100644
--- a/frontend/src/app/[locale]/positions/_partials/Animations.tsx
+++ b/frontend/src/app/[locale]/positions/_partials/Animations.tsx
@@ -33,7 +33,7 @@ export default function Animation({ animationData, handleSkipClick }: {
       <motion.div className="bg-fixed bg-[url('/images/bg-paper.jpg')] bg-repeat-y bg-cover fixed top-0 left-0 right-0 bottom-0" style={{ opacity: useTransform(scrollYProgress, [0.95, 1], [1, 0]) }} />
       <Link href="#manifesto" onClick={(e) => { e.preventDefault(); handleSkipClick(); }} className="absolute z-1 top-[calc(100dvh-40px)] right-[40px] text-grey-text flex flex-col items-center hover:text-black">
         {t('skipLink')}
-        <Image src="/icons/skip-arrow.svg" alt="" width={16} height={16} />
+        <Image src="/icons/skip-arrow.svg" alt="" width={16} height={11} />
       </Link>
 
       {/* Screen 1 */}
@@ -47,7 +47,7 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 2 */}
       <motion.div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.05, 0.1, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 0 && animationData.images[0].image.url || ""}
+          src={animationData.images.length > 0 && animationData.images[0].image.url || "/images/default-image.svg"}
           alt={animationData.images.length > 0 && animationData.images[0].image.altText || ""}
           width={1250}
           height={1089}
@@ -64,7 +64,7 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 3 */}
       <motion.div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.25, 0.3, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 1 && animationData.images[1].image.url || ""}
+          src={animationData.images.length > 1 && animationData.images[1].image.url || "/images/default-image.svg"}
           alt={animationData.images.length > 1 && animationData.images[1].image.altText || ""}
           width={1250}
           height={1089}
@@ -81,8 +81,8 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 4 */}
       <motion.div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.45, 0.5, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 1 && animationData.images[2].image.url || ""}
-          alt={animationData.images.length > 1 && animationData.images[2].image.altText || ""}
+          src={animationData.images.length > 2 && animationData.images[2].image.url || "/images/default-image.svg"}
+          alt={animationData.images.length > 2 && animationData.images[2].image.altText || ""}
           width={1250}
           height={1089}
           className='absolute top-[7.5vh] h-[85vh] object-contain'
@@ -98,8 +98,8 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 5 */}
       <motion.div className={clsx("fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center")} style={{ opacity: useTransform(scrollYProgress, [0, 0.65, 0.7, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 1 && animationData.images[3].image.url || ""}
-          alt={animationData.images.length > 1 && animationData.images[3].image.altText || ""}
+          src={animationData.images.length > 3 && animationData.images[3].image.url || "/images/default-image.svg"}
+          alt={animationData.images.length > 3 && animationData.images[3].image.altText || ""}
           width={1250}
           height={1089}
           className='absolute top-[7.5vh] h-[85vh] object-contain'
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index e0bae0f53..71fec20ca 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Script from 'next/script';
 import { DM_Mono } from 'next/font/google';
 
 const dmMono = DM_Mono({
@@ -29,13 +30,19 @@ export default function RootLayout({
   return (
     <html lang="fr" data-scroll-behavior="smooth">
       <head>
-        <script
+        {/* `next/script` et non des balises `<script>` nues : React avertit
+            qu'un script rendu par un composant n'est jamais execute cote client.
+            `afterInteractive` et non `beforeInteractive` : charge trop tot, le
+            script iRaiser detourne `console.error` et casse le flux RSC de Next
+            (`enqueueModel is not a function`), ce qui fait echouer les
+            navigations cote client. */}
+        <Script
           src="https://soutenir.dataforgood.fr/libs.iraiser.eu/libs/payment/frame/1.6/IRaiserFrame.js"
-          defer
+          strategy="afterInteractive"
         />
-        <script
+        <Script
           src="https://plausible.services.dataforgood.fr/js/script.file-downloads.hash.outbound-links.js"
-          defer
+          strategy="afterInteractive"
           data-domain="dataforgood.fr"
         />
       </head>
diff --git a/frontend/src/components/atoms/Pagination/Pagination.tsx b/frontend/src/components/atoms/Pagination/Pagination.tsx
index 6de15966f..ef3416e86 100644
--- a/frontend/src/components/atoms/Pagination/Pagination.tsx
+++ b/frontend/src/components/atoms/Pagination/Pagination.tsx
@@ -34,7 +34,7 @@ const Pagination = ({
                     setCurrentPage(currentPage - 1)
                 }
             }}>
-                <Image src={color === 'white' ? '/images/arrow-left.svg' : '/images/arrow-left-black.svg'} alt={t('pagination.left')} width={212} height={48} loading="lazy" className="relative left-0 object-contain max-h-full max-w-full" />
+                <Image src={color === 'white' ? '/images/arrow-left.svg' : '/images/arrow-left-black.svg'} alt={t('pagination.left')} width={212} height={22} loading="lazy" className="relative left-0 object-contain max-h-full max-w-full" />
             </div>
             <div className={clsx('flex flex-row gap-xs font-black', color === 'white' ? 'text-white' : 'text-black')}>
                 {Array.from(Array(pageCount).keys()).map((number, index) => (
@@ -47,7 +47,7 @@ const Pagination = ({
                     setCurrentPage(currentPage + 1)
                 }
             }}>
-                <Image src={color === 'white' ? '/images/arrow-right.svg' : '/images/arrow-right-black.svg'} alt={t('pagination.right')} width={212} height={48} loading="lazy" className="relative right-0 object-contain max-h-full max-w-full" />
+                <Image src={color === 'white' ? '/images/arrow-right.svg' : '/images/arrow-right-black.svg'} alt={t('pagination.right')} width={212} height={22} loading="lazy" className="relative right-0 object-contain max-h-full max-w-full" />
             </div>
 
         </div>
diff --git a/frontend/src/components/atoms/Title/Title.tsx b/frontend/src/components/atoms/Title/Title.tsx
index 2a42f8029..92360659f 100644
--- a/frontend/src/components/atoms/Title/Title.tsx
+++ b/frontend/src/components/atoms/Title/Title.tsx
@@ -36,7 +36,7 @@ const Title = ({
   return (
     <HeadingTag className={classes} {...props}>
       {children}
-      {hasSeparator && <Image loading="lazy" src="/images/separate.svg" alt="" width={200} height={10} className="mt-xs w-full h-2.5" />}
+      {hasSeparator && <Image loading="lazy" src="/images/separate.svg" alt="" width={1322} height={7} className="mt-xs w-full h-2.5" />}
     </HeadingTag>
   );
 };
diff --git a/frontend/src/components/molecules/BaseCard/BaseCard.tsx b/frontend/src/components/molecules/BaseCard/BaseCard.tsx
index c433f63a9..2525d3158 100644
--- a/frontend/src/components/molecules/BaseCard/BaseCard.tsx
+++ b/frontend/src/components/molecules/BaseCard/BaseCard.tsx
@@ -22,7 +22,6 @@ const BaseCard: React.FC<BaseCardProps> = ({
   subInfos,
   className,
   isBlank = false,
-  ...props
 }) => {
   if (!title || !link) {
     return null;
@@ -38,7 +37,6 @@ const BaseCard: React.FC<BaseCardProps> = ({
       rel={isBlank ? 'noreferrer' : undefined}
       href={link}
       aria-label={title}
-      {...props}
     >
       <div className="relative flex flex-col z-1 bg-white h-full">
         <div className="flex flex-col justify-between flex-1 min-h-64 px-6 py-7 gap-y-2">
diff --git a/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx b/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx
index f3922213c..5ffaa7025 100644
--- a/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx
+++ b/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx
@@ -38,7 +38,10 @@ const ThematicHeroBlock: React.FC<ThematicHeroBlockProps> = ({
       {...props}
     >
       <div className="col-start-1 row-start-1">
-        <Image src={image} alt="" width={1000} height={400} className="object-contain h-full w-full" />
+        {/* Pas de banniere dans le CMS : ne rien rendre plutot qu'une image
+            au `src` vide, que React signale et que le navigateur resout sur
+            l'URL de la page. Meme convention que `EditoCard`. */}
+        {image && <Image src={image} alt="" width={1000} height={400} priority className="object-contain h-full w-full" />}
       </div>
       <div className="col-start-1 row-start-1 flex items-center justify-center">
         <TiltedTitle variant="big" className={clsx(titleClassName, "drop-shadow-3 drop-shadow-black")} colors={colorsClass[colors]}>{title}</TiltedTitle>
diff --git a/frontend/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
index 225ecc3ca..329f89749 100644
--- a/frontend/src/components/ui/carousel.tsx
+++ b/frontend/src/components/ui/carousel.tsx
@@ -218,7 +218,7 @@ const CarouselPrevious = React.forwardRef<
       {...props}
     >
       <span className="relative flex items-center justify-center bg-building h-12 w-12">
-        <Image src="/images/carousel-previous.svg" alt={t('previous')} width={14} height={14} />
+        <Image src="/images/carousel-previous.svg" alt={t('previous')} width={14} height={24} />
       </span>
     </Button>
   )
@@ -246,7 +246,7 @@ const CarouselNext = React.forwardRef<
       {...props}
     >
       <span className="relative flex items-center justify-center bg-building h-12 w-12">
-        <Image src="/images/carousel-next.svg" alt={t('next')} width={14} height={14} />
+        <Image src="/images/carousel-next.svg" alt={t('next')} width={14} height={24} />
       </span>
     </Button>
   )
diff --git a/frontend/src/lib/formatters/thematics.ts b/frontend/src/lib/formatters/thematics.ts
index bc80afdbd..acafcd261 100644
--- a/frontend/src/lib/formatters/thematics.ts
+++ b/frontend/src/lib/formatters/thematics.ts
@@ -7,7 +7,7 @@ export function transformPartners(
   return partners?.map(partner => ({
     name: partner.name,
     description: partner.description,
-    image: partner.logo,
+    image: partner.logo?.url,
     link: partner.website_link,
   })) ?? [];
 }

From 3d514295b60ba1c213cadf3107ef5d2d6f323052 Mon Sep 17 00:00:00 2001
From: Legrand Thomas <18073293+DnzzL@users.noreply.github.com>
Date: Wed, 7 Oct 2026 20:23:54 +0200
Subject: [PATCH 2/2] fix(images): remplacer priority, deprecie en Next 16, par
 preload

Animations : un seul acces optionnel par image au lieu d'une garde de longueur repetee.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../[locale]/positions/_partials/Animations.tsx  | 16 ++++++++--------
 .../ThematicHeroBlock/ThematicHeroBlock.tsx      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/[locale]/positions/_partials/Animations.tsx b/frontend/src/app/[locale]/positions/_partials/Animations.tsx
index c85dacf1f..e57513c6e 100644
--- a/frontend/src/app/[locale]/positions/_partials/Animations.tsx
+++ b/frontend/src/app/[locale]/positions/_partials/Animations.tsx
@@ -47,8 +47,8 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 2 */}
       <motion.div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.05, 0.1, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 0 && animationData.images[0].image.url || "/images/default-image.svg"}
-          alt={animationData.images.length > 0 && animationData.images[0].image.altText || ""}
+          src={animationData.images[0]?.image.url || "/images/default-image.svg"}
+          alt={animationData.images[0]?.image.altText || ""}
           width={1250}
           height={1089}
           className='absolute top-[7.5vh] h-[85vh] object-contain'
@@ -64,8 +64,8 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 3 */}
       <motion.div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.25, 0.3, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 1 && animationData.images[1].image.url || "/images/default-image.svg"}
-          alt={animationData.images.length > 1 && animationData.images[1].image.altText || ""}
+          src={animationData.images[1]?.image.url || "/images/default-image.svg"}
+          alt={animationData.images[1]?.image.altText || ""}
           width={1250}
           height={1089}
           className='absolute top-[7.5vh] h-[85vh] object-contain'
@@ -81,8 +81,8 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 4 */}
       <motion.div className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.45, 0.5, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 2 && animationData.images[2].image.url || "/images/default-image.svg"}
-          alt={animationData.images.length > 2 && animationData.images[2].image.altText || ""}
+          src={animationData.images[2]?.image.url || "/images/default-image.svg"}
+          alt={animationData.images[2]?.image.altText || ""}
           width={1250}
           height={1089}
           className='absolute top-[7.5vh] h-[85vh] object-contain'
@@ -98,8 +98,8 @@ export default function Animation({ animationData, handleSkipClick }: {
       {/* Screen 5 */}
       <motion.div className={clsx("fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center")} style={{ opacity: useTransform(scrollYProgress, [0, 0.65, 0.7, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <Image
-          src={animationData.images.length > 3 && animationData.images[3].image.url || "/images/default-image.svg"}
-          alt={animationData.images.length > 3 && animationData.images[3].image.altText || ""}
+          src={animationData.images[3]?.image.url || "/images/default-image.svg"}
+          alt={animationData.images[3]?.image.altText || ""}
           width={1250}
           height={1089}
           className='absolute top-[7.5vh] h-[85vh] object-contain'
diff --git a/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx b/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx
index 5ffaa7025..d718600d4 100644
--- a/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx
+++ b/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx
@@ -41,7 +41,7 @@ const ThematicHeroBlock: React.FC<ThematicHeroBlockProps> = ({
         {/* Pas de banniere dans le CMS : ne rien rendre plutot qu'une image
             au `src` vide, que React signale et que le navigateur resout sur
             l'URL de la page. Meme convention que `EditoCard`. */}
-        {image && <Image src={image} alt="" width={1000} height={400} priority className="object-contain h-full w-full" />}
+        {image && <Image src={image} alt="" width={1000} height={400} preload className="object-contain h-full w-full" />}
       </div>
       <div className="col-start-1 row-start-1 flex items-center justify-center">
         <TiltedTitle variant="big" className={clsx(titleClassName, "drop-shadow-3 drop-shadow-black")} colors={colorsClass[colors]}>{title}</TiltedTitle>