From 57ee68e72b34d1d0eded0faeb36c0c500ff1e7c0 Mon Sep 17 00:00:00 2001
From: Thomas Fransolet <tfransolet@thelis.be>
Date: Thu, 7 May 2026 15:28:48 +0200
Subject: [PATCH] Wip working version

---
 BUGS.md                                       |  34 +++
 src/app/[slug]/[configId]/page.tsx            |  22 +-
 .../[configId]/sections/[sectionId]/page.tsx  |   5 +-
 src/components/QRScannerButton.tsx            |   6 +-
 src/components/sections/AgendaSection.tsx     | 102 ++++---
 src/components/sections/ArticleSection.tsx    |  29 +-
 src/components/sections/GameSection.tsx       |  28 +-
 src/components/sections/MapSection.tsx        |   2 +-
 src/components/sections/MenuSection.tsx       |  13 +-
 src/components/sections/PdfSection.tsx        |  13 +-
 src/components/sections/SliderSection.tsx     |  47 ++-
 src/components/sections/WeatherSection.tsx    | 279 ++++++++++++++----
 src/components/ui/AppBar.tsx                  |  32 +-
 src/lib/api/client.ts                         | 121 +++++++-
 src/lib/api/types.ts                          |  31 +-
 src/lib/theme.ts                              |   5 +-
 todo-features.md                              |   9 +-
 17 files changed, 582 insertions(+), 196 deletions(-)
 create mode 100644 BUGS.md

diff --git a/BUGS.md b/BUGS.md
new file mode 100644
index 0000000..5f43e16
--- /dev/null
+++ b/BUGS.md
@@ -0,0 +1,34 @@
+# Bugs & problèmes connus — visitapp-web
+
+## Sections — données non récupérées
+
+> **Fix appliqué** : le backend retourne un JSON plat (toutes les DTOs héritent de SectionDTO),
+> mais le TypeScript attendait une structure imbriquée (`section.map.points` etc.).
+> `normalizeSectionDTO()` dans `client.ts` restructure la réponse. À valider en prod.
+
+- [x] **Section Carte** — fix normalization + `CategorieDTO.label` (était `name`)
+- [x] **Section Slider** — fix normalization
+- [x] **Section Menu** — fix normalization (récursif pour les sous-sections)
+- [x] **Section Quiz** — fix normalization
+- [x] **Section Agenda** — fix normalization
+- [x] **Section Météo** — fix normalization
+
+## Affichage
+
+- [x] **Section Agenda — visuel des cartes** — liste horizontale minimaliste remplacée par une grille 2 colonnes avec image pleine largeur + badge date (calquée sur Flutter `event_list_item.dart`)
+- [x] **Section PDF** — remplacé `<iframe>` par `<embed type="application/pdf">` avec `#toolbar=0&navpanes=0` pour masquer la barre Adobe/Chrome
+- [ ] **Contrastes section detail** — les titres et le bouton "back" sont peu visibles (contraste insuffisant)
+- [x] **Bouton scanner** dans une configuration detail — ombre renforcée + anneau blanc semi-transparent pour contraster quel que soit le fond
+
+## Section Menu
+
+- [ ] **Images non affichées** — les images des items du menu ne s'affichent pas
+- [ ] **Clic sur un enfant → 404** — la navigation vers une sous-section du menu aboutit à une page 404
+
+## Section Quiz
+
+- [ ] **Questions non affichées** — aucune question n'apparaît dans la section Quiz
+
+## UX
+
+- [ ] **Puzzle** — l'auto-assignation des pièces manque d'aide visuelle pour l'utilisateur ; ajouter des indications / guides pour faciliter la prise en main
diff --git a/src/app/[slug]/[configId]/page.tsx b/src/app/[slug]/[configId]/page.tsx
index 22e0fed..0991000 100644
--- a/src/app/[slug]/[configId]/page.tsx
+++ b/src/app/[slug]/[configId]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation'
 import { getInstanceBySlug, getConfiguration, getSections } from '@/lib/api/client'
 import SectionList from '@/components/SectionList'
+import QRScannerButton from '@/components/QRScannerButton'
 
 export default async function ConfigPage({
   params,
@@ -27,14 +28,17 @@ export default async function ConfigPage({
     .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 
   return (
-    <SectionList
-      sections={activeSections}
-      slug={slug}
-      configId={configId}
-      configTitle={config.title}
-      configImageSource={config.imageSource}
-      configPrimaryColor={config.primaryColor}
-      languages={config.languages ?? ['FR']}
-    />
+    <>
+      <SectionList
+        sections={activeSections}
+        slug={slug}
+        configId={configId}
+        configTitle={config.title}
+        configImageSource={config.imageSource}
+        configPrimaryColor={config.primaryColor}
+        languages={config.languages ?? ['FR']}
+      />
+      <QRScannerButton slug={slug} configurationId={configId} />
+    </>
   )
 }
diff --git a/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx b/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx
index 6b26323..81b2d41 100644
--- a/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx
+++ b/src/app/[slug]/[configId]/sections/[sectionId]/page.tsx
@@ -49,7 +49,7 @@ export default async function SectionPage({
   }
 
   // Escape Games also expose guided paths
-  if (section.type === 'Game' && section.game?.gameType?.toLowerCase().includes('escape')) {
+  if (section.type === 'Game' && section.gameType === 'Escape') {
     try {
       const paths = await getGuidedPathsForGame(section.id, instance.publicApiKey!)
       section.game = { ...section.game, guidedPaths: paths }
@@ -78,7 +78,8 @@ export default async function SectionPage({
     case 'Slider':  content = <SliderSection {...props} />; break
     case 'Video':   content = <VideoSection {...props} />; break
     case 'Map':     content = <MapSection {...props} />; break
-    case 'Pdf':     content = <PdfSection {...props} />; break
+    case 'Pdf':
+    case 'PDF':     content = <PdfSection {...props} />; break
     case 'Weather': content = <WeatherSection {...props} />; break
     case 'Quiz':    content = <QuizSection {...props} />; break
     case 'Game':    content = <GameSection {...props} />; break
diff --git a/src/components/QRScannerButton.tsx b/src/components/QRScannerButton.tsx
index 38afd2f..5b7094d 100644
--- a/src/components/QRScannerButton.tsx
+++ b/src/components/QRScannerButton.tsx
@@ -87,9 +87,9 @@ export default function QRScannerButton({ slug, configurationId }: Props) {
         onClick={() => setOpen(true)}
         className="fixed bottom-5 right-5 w-14 h-14 rounded-full flex items-center justify-center z-40"
         style={{
-          background: 'var(--color-primary)',
-          color: 'var(--color-on-primary)',
-          boxShadow: '0 6px 16px rgba(0,0,0,0.3)',
+          background: 'rgba(255,255,255,0.95)',
+          color: 'var(--color-primary)',
+          boxShadow: '0 4px 20px rgba(0,0,0,0.35)',
         }}
         aria-label="Scanner un QR code"
       >
diff --git a/src/components/sections/AgendaSection.tsx b/src/components/sections/AgendaSection.tsx
index 90ff725..c364c73 100644
--- a/src/components/sections/AgendaSection.tsx
+++ b/src/components/sections/AgendaSection.tsx
@@ -26,7 +26,10 @@ interface Props {
   languages: string[]
 }
 
-const MONTHS = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc']
+function formatMonthHeader(year: number, month: number, lang: string): string {
+  const name = new Date(year, month, 1).toLocaleDateString(lang.toLowerCase(), { month: 'long' })
+  return name.charAt(0).toUpperCase() + name.slice(1) + ' ' + year
+}
 
 function eventImage(e: EventAgendaDTO): string | undefined {
   return e.resource?.url
@@ -96,7 +99,7 @@ export default function AgendaSection({ section, configId, languages }: Props) {
           </svg>
         </button>
         <span className="font-semibold text-sm" style={{ color: 'var(--color-text)' }}>
-          {MONTHS[selectedMonth]} {selectedYear}
+          {formatMonthHeader(selectedYear, selectedMonth, language)}
         </span>
         <button onClick={nextMonth} className="p-1">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--color-primary)' }}>
@@ -105,51 +108,64 @@ export default function AgendaSection({ section, configId, languages }: Props) {
         </button>
       </div>
 
-      {/* Events list */}
-      <main className="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
-        {filtered.length === 0 && (
+      {/* Events grid */}
+      <main className="flex-1 overflow-y-auto p-3">
+        {filtered.length === 0 ? (
           <p className="text-center py-12 text-sm" style={{ color: 'var(--color-text-muted)' }}>
             Aucun événement ce mois-ci
           </p>
+        ) : (
+          <div className="grid grid-cols-2 gap-3">
+            {filtered.map((event) => {
+              const img = eventImage(event)
+              return (
+                <button
+                  key={event.id}
+                  onClick={() => {
+                    setSelected(event)
+                    if (instanceId) {
+                      trackEvent({
+                        instanceId, configurationId: configId, sectionId: section.id,
+                        eventType: 'AgendaEventTap', language,
+                        metadata: JSON.stringify({ eventAgendaId: event.id, title: tPlain(event.label, language) }),
+                      })
+                    }
+                  }}
+                  className="rounded-2xl overflow-hidden text-left flex flex-col"
+                  style={{ background: 'var(--color-surface)', boxShadow: '0 2px 8px rgba(0,0,0,0.10)' }}
+                >
+                  {/* Image */}
+                  <div className="relative w-full aspect-video">
+                    {img ? (
+                      <Image src={img} alt="" fill className="object-cover" sizes="50vw" />
+                    ) : (
+                      <div className="w-full h-full" style={{ background: 'var(--color-primary-light)' }} />
+                    )}
+                    {event.dateFrom && (
+                      <div
+                        className="absolute bottom-0 right-0 flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-bold whitespace-nowrap"
+                        style={{ background: 'var(--color-primary)', color: 'var(--color-on-primary)', borderTopLeftRadius: 10 }}
+                      >
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
+                          <path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 18H5V8h14v13z"/>
+                        </svg>
+                        {new Date(event.dateFrom).toLocaleDateString(language.toLowerCase(), { day: 'numeric', month: 'short' })}
+                      </div>
+                    )}
+                  </div>
+                  {/* Title */}
+                  <div className="p-3 flex-1 flex items-center justify-center">
+                    <p
+                      className="text-sm font-semibold text-center w-full [&_p]:m-0 line-clamp-3"
+                      style={{ color: 'var(--color-text)' }}
+                      dangerouslySetInnerHTML={{ __html: t(event.label, language) }}
+                    />
+                  </div>
+                </button>
+              )
+            })}
+          </div>
         )}
-        {filtered.map((event) => {
-          const img = eventImage(event)
-          return (
-            <button
-              key={event.id}
-              onClick={() => {
-                setSelected(event)
-                if (instanceId) {
-                  trackEvent({
-                    instanceId, configurationId: configId, sectionId: section.id,
-                    eventType: 'AgendaEventTap', language,
-                    metadata: JSON.stringify({ eventAgendaId: event.id, title: tPlain(event.label, language) }),
-                  })
-                }
-              }}
-              className="w-full rounded-2xl overflow-hidden text-left flex gap-0"
-              style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}
-            >
-              {img && (
-                <div className="relative w-20 shrink-0">
-                  <Image src={img} alt="" fill className="object-cover" sizes="80px" />
-                </div>
-              )}
-              <div className="p-3 flex-1">
-                <p
-                  className="font-semibold text-sm [&_p]:m-0"
-                  style={{ color: 'var(--color-text)' }}
-                  dangerouslySetInnerHTML={{ __html: t(event.label, language) }}
-                />
-                {event.dateFrom && (
-                  <p className="text-xs mt-1" style={{ color: 'var(--color-text-muted)' }}>
-                    {new Date(event.dateFrom).toLocaleDateString(language.toLowerCase(), { day: 'numeric', month: 'long' })}
-                  </p>
-                )}
-              </div>
-            </button>
-          )
-        })}
       </main>
 
       {/* Event detail popup */}
diff --git a/src/components/sections/ArticleSection.tsx b/src/components/sections/ArticleSection.tsx
index 548c87d..d037fd2 100644
--- a/src/components/sections/ArticleSection.tsx
+++ b/src/components/sections/ArticleSection.tsx
@@ -7,6 +7,7 @@ import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import type { SectionDTO } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
+import { trackEvent } from '@/lib/stats'
 
 interface Props {
   section: SectionDTO
@@ -15,17 +16,39 @@ interface Props {
   languages: string[]
 }
 
-export default function ArticleSection({ section, slug, configId, languages }: Props) {
-  const { language, setAvailableLanguages } = useVisitor()
+export default function ArticleSection({ section, configId, languages }: Props) {
+  const { language, setAvailableLanguages, instanceId } = useVisitor()
   const router = useRouter()
   const article = section.article
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
   const audioRef = useRef<HTMLAudioElement>(null)
+  const scrollRef = useRef<HTMLElement>(null)
+  const articleReadTrackedRef = useRef(false)
 
   useEffect(() => { setAvailableLanguages(languages) }, [languages])
 
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el || !instanceId) return
+    const onScroll = () => {
+      if (articleReadTrackedRef.current) return
+      const total = el.scrollHeight - el.clientHeight
+      if (total <= 0) return
+      const ratio = el.scrollTop / total
+      if (ratio >= 0.8) {
+        articleReadTrackedRef.current = true
+        trackEvent({
+          instanceId, configurationId: configId, sectionId: section.id,
+          eventType: 'ArticleRead', language,
+        })
+      }
+    }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => el.removeEventListener('scroll', onScroll)
+  }, [instanceId, configId, section.id, language])
+
   const audioUrl = article?.audioIds?.find((a) => a.language === language)?.value
     ?? article?.audioIds?.[0]?.value
 
@@ -49,7 +72,7 @@ export default function ArticleSection({ section, slug, configId, languages }: P
     <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
       <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
 
-      <main className="flex-1 overflow-y-auto pb-24">
+      <main ref={scrollRef} className="flex-1 overflow-y-auto pb-24">
         {/* Carousel images */}
         {contents.length > 0 && (
           <ImageCarousel contents={contents} language={language} />
diff --git a/src/components/sections/GameSection.tsx b/src/components/sections/GameSection.tsx
index 2d83afd..64f8fdc 100644
--- a/src/components/sections/GameSection.tsx
+++ b/src/components/sections/GameSection.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
-import type { SectionDTO } from '@/lib/api/types'
+import type { SectionDTO, TranslationDTO } from '@/lib/api/types'
 import PuzzleGame from './game/PuzzleGame'
 import SlidingPuzzle from './game/SlidingPuzzle'
 import MessageDialog from './game/MessageDialog'
@@ -22,12 +22,9 @@ type GameKind = 'Puzzle' | 'SlidingPuzzle' | 'Escape' | 'Unknown'
 
 function detectKind(raw?: string): GameKind {
   if (!raw) return 'Unknown'
-  const v = raw.toString().toLowerCase()
-  if (v.includes('slid')) return 'SlidingPuzzle'
-  if (v.includes('escape')) return 'Escape'
-  if (v.includes('puzzle') || v === '0') return 'Puzzle'
-  if (v === '1') return 'SlidingPuzzle'
-  if (v === '2') return 'Escape'
+  if (raw === 'SlidingPuzzle') return 'SlidingPuzzle'
+  if (raw === 'Escape') return 'Escape'
+  if (raw === 'Puzzle') return 'Puzzle'
   return 'Unknown'
 }
 
@@ -37,14 +34,13 @@ export default function GameSection({ section, configId, languages }: Props) {
 
   useEffect(() => { setAvailableLanguages(languages) }, [languages])
 
-  const game = section.game
-  const kind = detectKind(game?.gameType)
-  const rows = Math.max(2, game?.rows ?? 3)
-  const cols = Math.max(2, game?.cols ?? 3)
-  const puzzleImage = game?.puzzleImage
+  const kind = detectKind(section.gameType)
+  const rows = Math.max(2, section.rows ?? 3)
+  const cols = Math.max(2, section.cols ?? 3)
+  const puzzleImage = section.puzzleImage?.url
 
-  const startMsg = t(game?.messageDebut, language)
-  const endMsg = t(game?.messageFin, language)
+  const startMsg = t(section.messageDebut as TranslationDTO[], language)
+  const endMsg = t(section.messageFin as TranslationDTO[], language)
 
   const [showStart, setShowStart] = useState<boolean>(!!startMsg)
   const [showEnd, setShowEnd] = useState(false)
@@ -138,8 +134,8 @@ export default function GameSection({ section, configId, languages }: Props) {
           />
         )}
         {kind === 'Escape' && (
-          (game?.guidedPaths?.length ?? 0) > 0 ? (
-            <EscapeProgression paths={game!.guidedPaths!} language={language} />
+          (section.guidedPaths?.length ?? 0) > 0 ? (
+            <EscapeProgression paths={section.guidedPaths!} language={language} />
           ) : (
             <EscapeStub title={tPlain(section.title, language)} description={t(section.description, language)} />
           )
diff --git a/src/components/sections/MapSection.tsx b/src/components/sections/MapSection.tsx
index bc140f0..acfb859 100644
--- a/src/components/sections/MapSection.tsx
+++ b/src/components/sections/MapSection.tsx
@@ -350,7 +350,7 @@ export default function MapSection({ section, configId, languages }: Props) {
                       className="w-2 h-2 rounded-full"
                       style={{ background: active ? 'white' : color }}
                     />
-                    {tPlain(cat.name, language) || `Cat. ${cat.id}`}
+                    {tPlain(cat.label, language) || `Cat. ${cat.id}`}
                   </button>
                 )
               })}
diff --git a/src/components/sections/MenuSection.tsx b/src/components/sections/MenuSection.tsx
index fb5a123..013fb6a 100644
--- a/src/components/sections/MenuSection.tsx
+++ b/src/components/sections/MenuSection.tsx
@@ -8,6 +8,7 @@ import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
 import type { SectionDTO } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
+import { trackEvent } from '@/lib/stats'
 
 interface Props {
   section: SectionDTO
@@ -17,10 +18,19 @@ interface Props {
 }
 
 export default function MenuSection({ section, slug, configId, languages }: Props) {
-  const { language, setAvailableLanguages } = useVisitor()
+  const { language, setAvailableLanguages, instanceId } = useVisitor()
   const router = useRouter()
   const [search, setSearch] = useState('')
 
+  function handleItemClick(sub: SectionDTO) {
+    if (!instanceId) return
+    trackEvent({
+      instanceId, configurationId: configId, sectionId: section.id,
+      eventType: 'MenuItemTap', language,
+      metadata: JSON.stringify({ targetSectionId: sub.id, title: tPlain(sub.title, language) }),
+    })
+  }
+
   useEffect(() => { setAvailableLanguages(languages) }, [languages])
 
   const subsections = [...(section.menu?.sections ?? [])]
@@ -73,6 +83,7 @@ export default function MenuSection({ section, slug, configId, languages }: Prop
           <Link
             key={sub.id}
             href={`/${slug}/${configId}/sections/${sub.id}`}
+            onClick={() => handleItemClick(sub)}
             className="rounded-2xl overflow-hidden block relative"
             style={{ background: 'var(--color-surface)', minHeight: 120 }}
           >
diff --git a/src/components/sections/PdfSection.tsx b/src/components/sections/PdfSection.tsx
index 05c897f..2d392e6 100644
--- a/src/components/sections/PdfSection.tsx
+++ b/src/components/sections/PdfSection.tsx
@@ -20,7 +20,7 @@ export default function PdfSection({ section, slug, configId, languages }: Props
 
   useEffect(() => { setAvailableLanguages(languages) }, [languages])
 
-  const pdfs = [...(section.pdf?.pdfs ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  const pdfs = [...(section.pdfs ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
   const [selectedIndex, setSelectedIndex] = useState(0)
 
   function getPdfUrl(pdf: OrderedTranslationAndResourceDTO): string | undefined {
@@ -45,8 +45,9 @@ export default function PdfSection({ section, slug, configId, languages }: Props
               onClick={() => setSelectedIndex(i)}
               className="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium"
               style={{
-                background: i === selectedIndex ? 'var(--color-primary)' : 'var(--color-surface)',
+                background: i === selectedIndex ? 'var(--color-primary)' : 'transparent',
                 color: i === selectedIndex ? 'var(--color-on-primary)' : 'var(--color-text)',
+                border: i === selectedIndex ? 'none' : '1.5px solid var(--color-border)',
               }}
             >
               PDF {i + 1}
@@ -61,10 +62,10 @@ export default function PdfSection({ section, slug, configId, languages }: Props
             Aucun PDF à afficher
           </div>
         ) : (
-          <iframe
-            src={currentUrl}
-            title={tPlain(section.title, language)}
-            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+          <embed
+            src={`${currentUrl}#toolbar=0&navpanes=0`}
+            type="application/pdf"
+            style={{ width: '100%', height: '100%', display: 'block' }}
           />
         )}
       </div>
diff --git a/src/components/sections/SliderSection.tsx b/src/components/sections/SliderSection.tsx
index e42418d..6d1af52 100644
--- a/src/components/sections/SliderSection.tsx
+++ b/src/components/sections/SliderSection.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { useVisitor } from '@/context/VisitorContext'
 import { t, tPlain } from '@/lib/i18n'
-import type { SectionDTO, ContentDTO } from '@/lib/api/types'
+import type { SectionDTO } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
 
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
   languages: string[]
 }
 
-export default function SliderSection({ section, slug, configId, languages }: Props) {
+export default function SliderSection({ section, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
   const router = useRouter()
   const [index, setIndex] = useState(0)
@@ -27,9 +27,9 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
 
   if (contents.length === 0) {
     return (
-      <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
+      <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--color-background)' }}>
         <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
-        <div className="flex-1 flex items-center justify-center text-sm" style={{ color: 'var(--color-text-muted)' }}>
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: 'var(--color-text-muted)' }}>
           Aucun contenu à afficher
         </div>
       </div>
@@ -39,16 +39,16 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
   const current = contents[index]
 
   return (
-    <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
+    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--color-background)' }}>
       <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
 
-      <main className="flex-1 flex flex-col overflow-hidden">
-        {/* Image zone — ~60% height */}
-        <div className="relative flex-[3]" style={{ minHeight: 0 }}>
+      <main style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        {/* Image zone — ~75% of remaining height */}
+        <div style={{ flex: 3, minHeight: 0, position: 'relative' }}>
           {current?.resource?.url && (
             <Image
               src={current.resource.url}
-              alt={t(current.title, language)}
+              alt={tPlain(current.title, language)}
               fill
               className="object-contain"
               sizes="100vw"
@@ -56,13 +56,12 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
           )}
 
           {/* Title overlay */}
-          {t(current?.title, language) && (
+          {tPlain(current?.title, language) && (
             <div
-              className="absolute bottom-0 left-0 right-0 px-4 py-3"
-              style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.6), transparent)' }}
+              style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '12px 16px', background: 'linear-gradient(to top, rgba(0,0,0,0.6), transparent)' }}
             >
-              <p className="text-white text-base font-semibold">
-                {t(current?.title, language)}
+              <p style={{ color: 'white', fontSize: 16, fontWeight: 600, margin: 0 }}>
+                {tPlain(current?.title, language)}
               </p>
             </div>
           )}
@@ -73,7 +72,7 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
               <button
                 onClick={() => setIndex((i) => Math.max(0, i - 1))}
                 disabled={index === 0}
-                className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/40 text-white rounded-full p-2 disabled:opacity-20"
+                style={{ position: 'absolute', left: 8, top: '50%', transform: 'translateY(-50%)', background: 'rgba(0,0,0,0.4)', color: 'white', borderRadius: '50%', padding: 8, border: 'none', cursor: 'pointer', opacity: index === 0 ? 0.2 : 1, display: 'flex' }}
               >
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
@@ -82,7 +81,7 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
               <button
                 onClick={() => setIndex((i) => Math.min(contents.length - 1, i + 1))}
                 disabled={index === contents.length - 1}
-                className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/40 text-white rounded-full p-2 disabled:opacity-20"
+                style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', background: 'rgba(0,0,0,0.4)', color: 'white', borderRadius: '50%', padding: 8, border: 'none', cursor: 'pointer', opacity: index === contents.length - 1 ? 0.2 : 1, display: 'flex' }}
               >
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
@@ -92,14 +91,10 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
           )}
         </div>
 
-        {/* Description card — ~25% height */}
+        {/* Description card */}
         {t(current?.description, language) && (
           <div
-            className="flex-[1] overflow-y-auto mx-4 my-3 rounded-2xl p-4"
-            style={{
-              background: 'var(--color-surface)',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
-            }}
+            style={{ flex: 1, minHeight: 0, overflowY: 'auto', margin: '12px 16px', borderRadius: 16, padding: 16, background: 'var(--color-surface)', boxShadow: '0 2px 8px rgba(0,0,0,0.08)', flexShrink: 0 }}
           >
             <div
               className="prose prose-sm text-center max-w-none"
@@ -111,16 +106,20 @@ export default function SliderSection({ section, slug, configId, languages }: Pr
 
         {/* Dots indicator */}
         {contents.length > 1 && (
-          <div className="flex justify-center gap-1.5 py-3">
+          <div style={{ flexShrink: 0, display: 'flex', justifyContent: 'center', gap: 6, padding: '12px 0' }}>
             {contents.map((_, i) => (
               <button
                 key={i}
                 onClick={() => setIndex(i)}
-                className="rounded-full transition-all"
                 style={{
+                  borderRadius: 9999,
+                  border: 'none',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
                   width: i === index ? 20 : 8,
                   height: 8,
                   background: i === index ? 'var(--color-primary)' : 'var(--color-border)',
+                  padding: 0,
                 }}
               />
             ))}
diff --git a/src/components/sections/WeatherSection.tsx b/src/components/sections/WeatherSection.tsx
index 86d5795..2858f36 100644
--- a/src/components/sections/WeatherSection.tsx
+++ b/src/components/sections/WeatherSection.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { useVisitor } from '@/context/VisitorContext'
-import { t, tPlain } from '@/lib/i18n'
+import { tPlain } from '@/lib/i18n'
 import type { SectionDTO, WeatherData, WeatherForecast } from '@/lib/api/types'
 import AppBar from '@/components/ui/AppBar'
 
@@ -23,6 +22,104 @@ interface DaySummary {
   maxTemp: number
 }
 
+const WEATHER_DESC: Record<string, Record<string, string>> = {
+  FR: {
+    'thunderstorm with light rain': 'Orage avec pluie légère',
+    'thunderstorm with rain': 'Orage avec pluie',
+    'thunderstorm with heavy rain': 'Orage avec forte pluie',
+    'light thunderstorm': 'Orage léger',
+    'thunderstorm': 'Orage',
+    'heavy thunderstorm': 'Fort orage',
+    'ragged thunderstorm': 'Orage violent',
+    'thunderstorm with light drizzle': 'Orage avec bruine légère',
+    'thunderstorm with drizzle': 'Orage avec bruine',
+    'thunderstorm with heavy drizzle': 'Orage avec forte bruine',
+    'light intensity drizzle': 'Bruine légère',
+    'drizzle': 'Bruine',
+    'heavy intensity drizzle': 'Forte bruine',
+    'light intensity drizzle rain': 'Pluie bruine légère',
+    'drizzle rain': 'Pluie bruine',
+    'heavy intensity drizzle rain': 'Forte pluie bruine',
+    'shower rain and drizzle': 'Averse et bruine',
+    'heavy shower rain and drizzle': 'Forte averse et bruine',
+    'shower drizzle': 'Averse bruine',
+    'light rain': 'Pluie légère',
+    'moderate rain': 'Pluie modérée',
+    'heavy intensity rain': 'Pluie intense',
+    'very heavy rain': 'Très forte pluie',
+    'extreme rain': 'Pluie extrême',
+    'freezing rain': 'Pluie verglaçante',
+    'light intensity shower rain': 'Averse légère',
+    'shower rain': 'Averse',
+    'heavy intensity shower rain': 'Forte averse',
+    'ragged shower rain': 'Averse violente',
+    'light snow': 'Neige légère',
+    'snow': 'Neige',
+    'heavy snow': 'Forte neige',
+    'sleet': 'Grésil',
+    'light shower sleet': 'Averse de grésil légère',
+    'shower sleet': 'Averse de grésil',
+    'light rain and snow': 'Pluie et neige légères',
+    'rain and snow': 'Pluie et neige',
+    'light shower snow': 'Averse de neige légère',
+    'shower snow': 'Averse de neige',
+    'heavy shower snow': 'Forte averse de neige',
+    'mist': 'Brume',
+    'smoke': 'Fumée',
+    'haze': 'Brume sèche',
+    'sand/dust whirls': 'Tourbillons de sable',
+    'fog': 'Brouillard',
+    'sand': 'Sable',
+    'dust': 'Poussière',
+    'volcanic ash': 'Cendres volcaniques',
+    'squalls': 'Rafales',
+    'tornado': 'Tornade',
+    'clear sky': 'Ciel dégagé',
+    'few clouds': 'Quelques nuages',
+    'scattered clouds': 'Nuages épars',
+    'broken clouds': 'Nuages fragmentés',
+    'overcast clouds': 'Ciel couvert',
+  },
+  NL: {
+    'clear sky': 'Heldere lucht',
+    'few clouds': 'Enkele wolken',
+    'scattered clouds': 'Verspreide wolken',
+    'broken clouds': 'Gebroken bewolking',
+    'overcast clouds': 'Bewolkt',
+    'light rain': 'Lichte regen',
+    'moderate rain': 'Matige regen',
+    'heavy intensity rain': 'Zware regen',
+    'thunderstorm': 'Onweer',
+    'light snow': 'Lichte sneeuw',
+    'snow': 'Sneeuw',
+    'mist': 'Mist',
+    'fog': 'Mist',
+    'drizzle': 'Motregen',
+    'shower rain': 'Regenbui',
+  },
+  DE: {
+    'clear sky': 'Klarer Himmel',
+    'few clouds': 'Wenige Wolken',
+    'scattered clouds': 'Vereinzelte Wolken',
+    'broken clouds': 'Aufgelockerte Bewölkung',
+    'overcast clouds': 'Bedeckt',
+    'light rain': 'Leichter Regen',
+    'moderate rain': 'Mäßiger Regen',
+    'heavy intensity rain': 'Starker Regen',
+    'thunderstorm': 'Gewitter',
+    'light snow': 'Leichter Schnee',
+    'snow': 'Schnee',
+    'mist': 'Nebel',
+    'fog': 'Nebel',
+    'drizzle': 'Nieselregen',
+    'shower rain': 'Schauer',
+  },
+}
+
+function translateDesc(desc: string, lang: string): string {
+  return WEATHER_DESC[lang]?.[desc.toLowerCase()] ?? (desc.charAt(0).toUpperCase() + desc.slice(1))
+}
+
 const SHORT_DAYS: Record<string, string[]> = {
   FR: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
   NL: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
@@ -59,7 +156,6 @@ function buildDays(list: WeatherForecast[]): DaySummary[] {
   }
   return Array.from(byDay.entries()).slice(0, 6).map(([dt, forecasts]) => {
     const rep = forecasts.find((f) => new Date((f.dt ?? 0) * 1000).getHours() === 12) ?? forecasts[forecasts.length - 1]
-    const temps = forecasts.map((f) => f.main?.temp ?? 0)
     return {
       dt,
       forecasts,
@@ -70,7 +166,59 @@ function buildDays(list: WeatherForecast[]): DaySummary[] {
   })
 }
 
-export default function WeatherSection({ section, slug, configId, languages }: Props) {
+function TempChart({ forecasts }: { forecasts: WeatherForecast[] }) {
+  const temps = forecasts.map((f) => f.main?.temp ?? 0)
+  const hours = forecasts.map((f) => new Date((f.dt ?? 0) * 1000).getHours())
+  if (temps.length < 2) return null
+
+  const W = 300
+  const H = 120
+  const padX = 18
+  const padTop = 22
+  const padBottom = 22
+  const chartH = H - padTop - padBottom
+
+  const minT = Math.min(...temps) - 2
+  const maxT = Math.max(...temps) + 2
+  const toX = (i: number) => padX + (i / (temps.length - 1)) * (W - padX * 2)
+  const toY = (t: number) => padTop + chartH - ((t - minT) / (maxT - minT)) * chartH
+
+  const pts = temps.map((t, i) => ({ x: toX(i), y: toY(t) }))
+
+  // Smooth cubic bezier
+  let linePath = `M ${pts[0].x} ${pts[0].y}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const dx = (pts[i + 1].x - pts[i].x) / 2.5
+    linePath += ` C ${pts[i].x + dx} ${pts[i].y} ${pts[i + 1].x - dx} ${pts[i + 1].y} ${pts[i + 1].x} ${pts[i + 1].y}`
+  }
+  const areaPath = `${linePath} L ${pts[pts.length - 1].x} ${H - padBottom} L ${pts[0].x} ${H - padBottom} Z`
+
+  return (
+    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} style={{ display: 'block' }}>
+      <defs>
+        <linearGradient id="tg" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.18" />
+          <stop offset="100%" stopColor="#3B82F6" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={areaPath} fill="url(#tg)" />
+      <path d={linePath} fill="none" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" />
+      {pts.map((p, i) => (
+        <g key={i}>
+          <circle cx={p.x} cy={p.y} r="4" fill="white" stroke="#3B82F6" strokeWidth="2" />
+          <text x={p.x} y={p.y - 8} textAnchor="middle" fontSize="9" fill="#374151" fontWeight="700">
+            {Math.round(temps[i])}°
+          </text>
+          <text x={p.x} y={H - 4} textAnchor="middle" fontSize="8" fill="#9CA3AF">
+            {String(hours[i]).padStart(2, '0')}h
+          </text>
+        </g>
+      ))}
+    </svg>
+  )
+}
+
+export default function WeatherSection({ section, languages }: Props) {
   const { language, setAvailableLanguages } = useVisitor()
   const router = useRouter()
   const [selectedDay, setSelectedDay] = useState(0)
@@ -88,7 +236,7 @@ export default function WeatherSection({ section, slug, configId, languages }: P
 
   if (!weatherData || days.length === 0) {
     return (
-      <div className="min-h-screen flex flex-col" style={{ background: 'var(--color-background)' }}>
+      <div className="h-dvh flex flex-col" style={{ background: 'var(--color-background)' }}>
         <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
         <div className="flex-1 flex items-center justify-center text-sm" style={{ color: 'var(--color-text-muted)' }}>
           Aucune donnée météo
@@ -98,38 +246,34 @@ export default function WeatherSection({ section, slug, configId, languages }: P
   }
 
   const rep = selected.representative
-  const desc = rep.weather?.[0]?.description ?? ''
+  const desc = translateDesc(rep.weather?.[0]?.description ?? '', language)
+  const maxRain = Math.round(Math.max(...selected.forecasts.map((f) => (typeof f.pop === 'number' ? f.pop : 0))) * 100)
+  const humidity = Math.round(rep.main?.humidity ?? 0)
 
   return (
-    <div
-      className="min-h-screen flex flex-col"
-      style={{ background: '#E8F4FD' }}
-    >
+    <div className="h-dvh flex flex-col overflow-hidden" style={{ background: '#E8F4FD' }}>
       <AppBar title={tPlain(section.title, language)} onBack={() => router.back()} />
 
-      <main className="flex-1 overflow-y-auto pb-6">
-        {/* City */}
-        <p className="px-5 pt-4 text-sm font-medium" style={{ color: '#6B7280' }}>
+      <main className="flex-1 flex flex-col overflow-y-auto pb-6 gap-3 pt-3">
+
+        {/* City name */}
+        <p className="px-5 text-2xl font-bold" style={{ color: '#1F2937' }}>
           {section.weather?.city ?? ''}
         </p>
 
         {/* Day tabs */}
-        <div className="flex gap-2 px-3 py-3 overflow-x-auto">
+        <div className="grid px-3 gap-1" style={{ gridTemplateColumns: `repeat(${days.length}, 1fr)` }}>
           {days.map((day, i) => (
             <button
               key={day.dt}
               onClick={() => setSelectedDay(i)}
-              className="shrink-0 flex flex-col items-center px-3 py-2 rounded-2xl transition-all"
+              className="flex flex-col items-center px-1 py-2 rounded-2xl transition-all"
               style={{
                 background: i === selectedDay ? 'white' : 'transparent',
                 boxShadow: i === selectedDay ? '0 2px 8px rgba(0,0,0,0.08)' : 'none',
-                minWidth: 64,
               }}
             >
-              <span
-                className="text-xs font-medium"
-                style={{ color: i === selectedDay ? '#1F2937' : '#6B7280' }}
-              >
+              <span className="text-xs font-medium" style={{ color: i === selectedDay ? '#1F2937' : '#6B7280' }}>
                 {shortDay(day.dt, language)}
               </span>
               <img
@@ -145,66 +289,101 @@ export default function WeatherSection({ section, slug, configId, languages }: P
           ))}
         </div>
 
-        {/* Selected day main */}
-        <div className="px-5">
-          <p className="text-sm" style={{ color: '#6B7280' }}>{fullDay(selected.dt, language)}</p>
-          <div className="flex items-center gap-1 mt-1">
-            <span className="text-6xl font-light" style={{ color: '#1F2937' }}>
-              {Math.round(selected.maxTemp)}°
-            </span>
-            <span className="text-3xl font-light" style={{ color: '#9CA3AF' }}>
-              /{Math.round(selected.minTemp)}°
-            </span>
+        {/* Temperature chart */}
+        <div
+          className="mx-3 rounded-2xl px-3 py-3"
+          style={{ background: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
+        >
+          <TempChart forecasts={selected.forecasts} />
+        </div>
+
+        {/* Selected day — main info */}
+        <div
+          className="mx-3 rounded-2xl px-4 py-4 flex items-center gap-3"
+          style={{ background: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
+        >
+          {/* Left: date + temp */}
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-medium capitalize" style={{ color: '#6B7280' }}>
+              {fullDay(selected.dt, language)}
+            </p>
+            <div className="flex items-end gap-1 mt-1">
+              <span className="text-5xl font-light leading-none" style={{ color: '#1F2937' }}>
+                {Math.round(selected.maxTemp)}°
+              </span>
+              <span className="text-2xl font-light pb-1" style={{ color: '#9CA3AF' }}>
+                /{Math.round(selected.minTemp)}°
+              </span>
+            </div>
+          </div>
+          {/* Right: icon + description + stats */}
+          <div className="flex flex-col items-center gap-1 shrink-0">
             <img
               src={`https://openweathermap.org/img/wn/${rep.weather?.[0]?.icon ?? '01d'}@2x.png`}
               alt={desc}
-              width={64}
-              height={64}
+              width={56}
+              height={56}
             />
+            {desc && (
+              <p className="text-xs font-medium text-center" style={{ color: 'var(--color-primary)', maxWidth: 100 }}>
+                {desc}
+              </p>
+            )}
+          </div>
+          {/* Stats */}
+          <div className="flex flex-col gap-2 shrink-0 text-right">
+            <div>
+              <p className="text-xs" style={{ color: '#6B7280' }}>
+                {language === 'EN' ? 'Humidity' : language === 'NL' ? 'Vochtigheid' : language === 'DE' ? 'Luftfeucht.' : 'Humidité'}
+              </p>
+              <p className="text-sm font-semibold" style={{ color: '#1F2937' }}>{humidity}%</p>
+            </div>
+            <div>
+              <p className="text-xs" style={{ color: '#6B7280' }}>
+                {language === 'EN' ? 'Rain' : language === 'NL' ? 'Neerslag' : language === 'DE' ? 'Regen' : 'Pluie'}
+              </p>
+              <p className="text-sm font-semibold" style={{ color: '#3B82F6' }}>{maxRain}%</p>
+            </div>
           </div>
-          {desc && (
-            <p className="text-sm font-medium" style={{ color: 'var(--color-primary)' }}>
-              {desc.charAt(0).toUpperCase() + desc.slice(1)}
-            </p>
-          )}
         </div>
 
         {/* Hourly */}
-        <div className="mt-5 px-5">
-          <p className="text-sm font-semibold mb-3" style={{ color: '#1F2937' }}>
+        <div className="mx-3 flex-1 flex flex-col">
+          <p className="text-sm font-semibold mb-2 px-1" style={{ color: '#1F2937' }}>
             {language === 'EN' ? 'Hourly' : language === 'NL' ? 'Per uur' : language === 'DE' ? 'Stündlich' : 'Par heure'}
           </p>
           <div
-            className="rounded-2xl overflow-x-auto"
-            style={{ background: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}
+            className="flex-1 rounded-2xl overflow-x-auto flex flex-col justify-center"
+            style={{ background: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.05)', minHeight: 140 }}
           >
-            <div className="flex px-2 py-4 gap-1" style={{ minWidth: 'max-content' }}>
-              {(selected.forecasts.slice(0, 8)).map((f) => {
+            <div className="flex px-3 py-5 gap-0">
+              {selected.forecasts.map((f) => {
                 const hour = new Date((f.dt ?? 0) * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
                 const pop = Math.round((typeof f.pop === 'number' ? f.pop : 0) * 100)
                 return (
-                  <div key={f.dt} className="flex flex-col items-center gap-1 w-16">
-                    <span className="text-sm font-semibold" style={{ color: '#1F2937' }}>
+                  <div key={f.dt} className="flex flex-col items-center gap-2" style={{ flex: '1 0 64px' }}>
+                    <span className="text-base font-bold" style={{ color: '#1F2937' }}>
                       {Math.round(f.main?.temp ?? 0)}°
                     </span>
                     {pop > 0 ? (
-                      <span className="text-xs font-medium" style={{ color: '#3B82F6' }}>{pop}%</span>
+                      <span className="text-xs font-semibold" style={{ color: '#3B82F6' }}>{pop}%</span>
                     ) : (
-                      <span className="text-xs" style={{ minHeight: 16 }} />
+                      <span style={{ height: 16 }} />
                     )}
                     <img
                       src={`https://openweathermap.org/img/wn/${f.weather?.[0]?.icon ?? '01d'}.png`}
                       alt=""
-                      width={34}
-                      height={34}
+                      width={40}
+                      height={40}
                     />
-                    <span className="text-xs" style={{ color: '#6B7280' }}>{hour}</span>
+                    <span className="text-xs font-medium" style={{ color: '#6B7280' }}>{hour}</span>
                   </div>
                 )
               })}
             </div>
           </div>
         </div>
+
       </main>
     </div>
   )
diff --git a/src/components/ui/AppBar.tsx b/src/components/ui/AppBar.tsx
index f4b33e3..045d98a 100644
--- a/src/components/ui/AppBar.tsx
+++ b/src/components/ui/AppBar.tsx
@@ -22,6 +22,7 @@ export default function AppBar({ title, onBack }: Props) {
         background: 'linear-gradient(135deg, var(--color-primary), var(--color-secondary))',
         minHeight: 56,
         color: 'var(--color-on-primary)',
+        textShadow: '0 1px 3px rgba(0,0,0,0.15)',
       }}
     >
       <div className="flex items-center gap-3 flex-1">
@@ -42,19 +43,24 @@ export default function AppBar({ title, onBack }: Props) {
       </div>
 
       {availableLanguages.length > 1 && (
-        <div className="relative">
-          <select
-            value={language}
-            onChange={(e) => setLanguage(e.target.value)}
-            className="appearance-none bg-transparent text-inherit text-sm pl-1 pr-5 py-1 cursor-pointer focus:outline-none"
-            aria-label="Langue"
-          >
-            {availableLanguages.map((lang) => (
-              <option key={lang} value={lang} style={{ color: '#1a1a1a' }}>
-                {FLAG[lang] ?? lang} {lang}
-              </option>
-            ))}
-          </select>
+        <div className="flex items-center gap-1">
+          {availableLanguages.map((lang) => {
+            const active = lang === language
+            return (
+              <button
+                key={lang}
+                onClick={() => setLanguage(lang)}
+                className="text-xs font-semibold px-2 py-1 rounded-lg transition-all"
+                style={{
+                  background: active ? 'rgba(255,255,255,0.25)' : 'transparent',
+                  color: 'var(--color-on-primary)',
+                  opacity: active ? 1 : 0.6,
+                }}
+              >
+                {FLAG[lang] ?? lang}
+              </button>
+            )
+          })}
         </div>
       )}
     </header>
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index 4973089..bc74509 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -14,6 +14,124 @@ async function apiFetch<T>(path: string, apiKey?: string): Promise<T> {
   return res.json()
 }
 
+// The backend returns a flat JSON per section (all DTO types extend SectionDTO).
+// e.g. a Map section has `points`, `categories`, etc. at the root, not nested under `map`.
+// This function restructures the flat response into the nested shape our components expect.
+function normalizeSectionDTO(raw: any): SectionDTO {
+  const base: SectionDTO = {
+    id: raw.id,
+    type: raw.type,
+    label: raw.label,
+    title: raw.title,
+    description: raw.description,
+    imageSource: raw.imageSource,
+    isActive: raw.isActive,
+    order: raw.order,
+    configurationId: raw.configurationId,
+    isSubSection: raw.isSubSection,
+    parentId: raw.parentId,
+    latitude: raw.latitude,
+    longitude: raw.longitude,
+    isBeacon: raw.isBeacon,
+    beaconId: raw.beaconId,
+  }
+
+  switch (raw.type) {
+    case 'Map':
+      base.map = {
+        isListViewEnabled: raw.isListViewEnabled,
+        zoom: raw.zoom,
+        mapType: raw.mapType,
+        mapProvider: raw.mapProvider,
+        points: raw.points,
+        categories: raw.categories,
+        centerLatitude: raw.centerLatitude,
+        centerLongitude: raw.centerLongitude,
+        isParcours: raw.isParcours,
+        guidedPaths: raw.guidedPaths,
+      }
+      break
+    case 'Article':
+      base.article = {
+        content: raw.content,
+        isContentTop: raw.isContentTop,
+        audioIds: raw.audioIds,
+        isReadAudioAuto: raw.isReadAudioAuto,
+        contents: raw.contents,
+      }
+      break
+    case 'Slider':
+      base.slider = { contents: raw.contents }
+      break
+    case 'Quiz':
+      console.log('[Quiz] raw questions:', raw.questions?.length, 'bad_level:', raw.bad_level)
+      base.quiz = {
+        questions: raw.questions?.map((q: any) => ({
+          ...q,
+          responses: q.responses?.map((r: any) => ({
+            ...r,
+            isCorrect: r.isGood,
+          })),
+        })),
+        badLevel: raw.bad_level,
+        mediumLevel: raw.medium_level,
+        goodLevel: raw.good_level,
+        greatLevel: raw.great_level,
+      }
+      break
+    case 'Agenda':
+      base.agenda = {
+        isOnlineAgenda: raw.isOnlineAgenda,
+        events: raw.events,
+      }
+      break
+    case 'Menu':
+      base.menu = {
+        sections: Array.isArray(raw.sections) ? raw.sections.map(normalizeSectionDTO) : [],
+      }
+      break
+    case 'Video':
+      base.video = {
+        source: raw.source,
+        imageSource: raw.imageSource,
+        title: raw.title,
+      }
+      break
+    case 'Pdf':
+    case 'PDF':
+      base.pdfs = raw.pdfs
+      break
+    case 'Weather':
+      base.weather = { result: raw.result, city: raw.city }
+      break
+    case 'Web':
+      base.web = { source: raw.source }
+      break
+    case 'Game':
+      console.log('[Game] raw.gameType =', raw.gameType)
+      base.gameType = raw.gameType
+      base.rows = raw.rows
+      base.cols = raw.cols
+      base.puzzleImage = raw.puzzleImage
+      base.messageDebut = raw.messageDebut
+      base.messageFin = raw.messageFin
+      base.guidedPaths = raw.guidedPaths
+      break
+    case 'Event':
+      base.event = {
+        startDate: raw.startDate ?? raw.StartDate,
+        endDate: raw.endDate ?? raw.EndDate,
+        baseSectionMapId: raw.baseSectionMapId ?? raw.BaseSectionMapId,
+        parcoursIds: raw.parcoursIds ?? raw.ParcoursIds,
+        globalMapAnnotations: raw.globalMapAnnotations ?? raw.GlobalMapAnnotations,
+        programme: raw.programme ?? raw.Programme,
+      }
+      break
+  }
+
+  return base
+}
+
 export async function getInstanceBySlug(slug: string): Promise<ApplicationInstanceDTO> {
   return apiFetch(`/api/instance/slug/${slug}`)
 }
@@ -27,7 +145,8 @@ export async function getConfiguration(configId: string, apiKey: string): Promis
 }
 
 export async function getSections(configId: string, apiKey: string): Promise<SectionDTO[]> {
-  return apiFetch(`/api/Section/configuration/${configId}/detail`, apiKey)
+  const raw: any[] = await apiFetch(`/api/Section/configuration/${configId}/detail`, apiKey)
+  return raw.map(normalizeSectionDTO)
 }
 
 export async function getGuidedPaths(sectionMapId: string, apiKey: string): Promise<GuidedPathDTO[]> {
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index 28f5ec6..fcbd3f3 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -54,6 +54,7 @@ export type SectionType =
   | 'Quiz'
   | 'Article'
   | 'Pdf'
+  | 'PDF'
   | 'Game'
   | 'Agenda'
   | 'Weather'
@@ -75,14 +76,22 @@ export interface SectionDTO {
   longitude?: number
   isBeacon?: boolean
   beaconId?: string
-  // Typed data per section type
+  // Typed data per section type (fields are flat at root — all sub-DTOs extend SectionDTO)
   article?: ArticleDTO
   slider?: SliderDTO
   quiz?: QuizDTO
   map?: MapDTO
   agenda?: AgendaDTO
-  game?: GameDTO
-  pdf?: PdfDTO
+  // Game fields (GameDTO extends SectionDTO → flat)
+  gameType?: 'Puzzle' | 'SlidingPuzzle' | 'Escape'
+  rows?: number
+  cols?: number
+  puzzleImage?: ResourceDTO
+  messageDebut?: TranslationAndResourceDTO[]
+  messageFin?: TranslationAndResourceDTO[]
+  guidedPaths?: GuidedPathDTO[]
+  // PDF fields
+  pdfs?: OrderedTranslationAndResourceDTO[]
   menu?: MenuDTO
   video?: VideoDTO
   source?: string
@@ -181,8 +190,9 @@ export interface GeoPointDTO {
 
 export interface CategorieDTO {
   id: number
-  name?: TranslationDTO[]
+  label?: TranslationDTO[]
   color?: string
+  icon?: string
 }
 
 export interface MapDTO {
@@ -266,16 +276,6 @@ export interface AgendaDTO {
   events?: EventAgendaDTO[]
 }
 
-export interface GameDTO {
-  messageDebut?: TranslationDTO[]
-  messageFin?: TranslationDTO[]
-  puzzleImage?: string
-  rows?: number
-  cols?: number
-  gameType?: string
-  guidedPaths?: GuidedPathDTO[]
-}
-
 export interface TranslationAndResourceDTO {
   language?: string
   resourceId?: string
@@ -287,9 +287,6 @@ export interface OrderedTranslationAndResourceDTO {
   translationAndResourceDTOs?: TranslationAndResourceDTO[]
 }
 
-export interface PdfDTO {
-  pdfs?: OrderedTranslationAndResourceDTO[]
-}
 
 export interface VideoDTO {
   source?: string
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index b0c01b2..dd7ea02 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -26,7 +26,10 @@ export function buildTheme(primaryColor: string, secondaryColor: string): ThemeC
     '--color-primary': primaryColor,
     '--color-secondary': secondaryColor,
     '--color-primary-light': hexToRgba(primaryColor, 0.12),
-    '--color-on-primary': luminance > 0.4 ? '#1A1A1A' : '#FFFFFF',
+    // Threshold ~0.179 is the mathematically correct crossover for equal WCAG contrast
+    // between white (1.0) and black (0.0) against a given background luminance.
+    // Using 0.4 was wrong: e.g. luminance 0.35 → white gives only 2.6:1 contrast (fails WCAG AA).
+    '--color-on-primary': luminance > 0.179 ? '#1A1A1A' : '#FFFFFF',
   }
 }
 
diff --git a/todo-features.md b/todo-features.md
index 5d23c23..ccf57b6 100644
--- a/todo-features.md
+++ b/todo-features.md
@@ -71,9 +71,7 @@ Page dédiée pour les sections de type Event ([EventSection.tsx](visitapp-web/s
 - `instanceId` propagé via `VisitorContext` (depuis le layout `[slug]`)
 - Events spécifiques branchés : `MapPoiTap`, `QuizComplete`, `GameComplete`, `AgendaEventTap`, `QrScan`
 
-**Reste à brancher (rapide)** :
-- [ ] `ArticleRead` quand l'article est scrollé jusqu'à un seuil (~80%)
-- [ ] `MenuItemTap` au tap sur un item de menu
+**Tous les events Flutter sont branchés** : `SectionView`, `SectionLeave`, `MapPoiTap`, `QuizComplete`, `GameComplete`, `AgendaEventTap`, `QrScan`, `ArticleRead` (déclenché au scroll ≥80%), `MenuItemTap`.
 
 ---
 
@@ -101,8 +99,7 @@ Page dédiée pour les sections de type Event ([EventSection.tsx](visitapp-web/s
   - Gère les erreurs de permission caméra avec message visuel
 - Nécessite HTTPS en production (sauf localhost)
 
-**Reste à faire (nice-to-have)** :
-- [ ] Bouton scanner aussi accessible depuis `ConfigurationGrid` ou `SectionList` (actuellement seulement sur la home)
+Le bouton scanner est exposé sur la home (`/[slug]`) et dans la page configuration (`/[slug]/[configId]`).
 
 ---
 
@@ -125,7 +122,7 @@ Ces features ne sont **pas portées sur le web** :
 |---|---|---|
 | **Event Section** | Haute (gap fonctionnel) | ✅ Fait |
 | **Agenda popup enrichi** | Moyenne | ✅ Fait |
-| **Stats tracking** | Moyenne (besoin métier) | ✅ Fait (à compléter : ArticleRead, MenuItemTap) |
+| **Stats tracking** | Moyenne (besoin métier) | ✅ Fait (tous les events) |
 | **Event "à la une" sur la home** | Basse (UX) | ✅ Fait |
 | **QR Scanner** | Basse | ✅ Fait |