From d0224df2fcb420f7674e20cca44545def8dba492 Mon Sep 17 00:00:00 2001
From: Ladebeze66 <fgras.ca@gmail.com>
Date: Wed, 22 Apr 2026 13:19:19 +0200
Subject: [PATCH] cap01

---
 app/components/Footer.jsx                  |  4 ++--
 app/globals.css                            | 21 +++++++++++++-----
 app/layout.tsx                             | 16 ++++++++------
 app/page.tsx                               |  4 ++--
 docs-site-interne/captures/AUDIT-VISUEL.md | 25 +++++++++++++---------
 5 files changed, 44 insertions(+), 26 deletions(-)
diff --git a/app/components/Footer.jsx b/app/components/Footer.jsx
index 66c3e9e..d166e59 100644
--- a/app/components/Footer.jsx
+++ b/app/components/Footer.jsx
@@ -10,8 +10,8 @@ export default function Footer() {
   }
 
   return (
-    <footer className="bg-white/50 backdrop-blur rounded-lg min-h-[80px]">
-      <div className="max-w-4xl mx-auto flex flex-col items-center font-orbitron-12 py-6 text-sm text-gray-700">
+    <footer className="min-h-[80px] w-full min-w-0 rounded-lg bg-white/50 backdrop-blur">
+      <div className="mx-auto flex max-w-4xl min-w-0 flex-col items-center px-4 py-6 font-orbitron-12 text-sm text-gray-700">
         <p>&copy; {new Date().getFullYear()} Gras-Calvet Fernand</p>
       </div>
     </footer>
diff --git a/app/globals.css b/app/globals.css
index 75cbeb1..6ae9ddb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -15,10 +15,18 @@
   }
 }
 
+html {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
 }
 
 @keyframes fade-in {
@@ -60,15 +68,18 @@ body {
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh;
-  width: 100vw; /* 🔥 Assure que le wallpaper couvre TOUT l’écran */
-  min-width: 100vw; /* 🔥 Évite qu’il soit tronqué sur les grandes pages */
+  /* 100% plutôt que 100vw évite le débordement horizontal (barre de scroll) au zoom */
+  width: 100%;
+  min-width: 0;
+  left: 0;
+  right: 0;
 }
 
-
 @media (max-width: 768px) {
   .bg-wallpaper {
-    width: 200vw; /* 🔥 Étend le wallpaper sur toute la largeur disponible */
-    min-width: 200vw; /* 🔥 Évite qu’il soit limité par le contenu */
+    /* Ne pas utiliser 200vw : double la largeur de page et déstabilise le zoom / dézoom */
+    width: 100%;
+    min-width: 0;
   }
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 1a1414a..d64a44c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -26,8 +26,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
   return (
     <html lang="fr">
-      <body>
-        <div className="relative min-h-[100dvh] w-full grid grid-rows-[auto_1fr_auto]">
+      <body className="min-w-0 overflow-x-hidden antialiased">
+        <div className="relative grid min-h-[100dvh] w-full min-w-0 grid-rows-[auto_1fr_auto]">
           {/* Conserve le fond en plein écran */}
           <div className="absolute inset-0 bg-wallpaper"></div>
 
@@ -41,9 +41,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           </div>
 
           {/* Header */}
-          <header className="relative h-16 md:h-16 z-20 bg-white/50 backdrop-blur-md border-b-2 border-gray-500 px-4 py-2 md:px-6 fixed top-0 left-0 w-full shadow-md">
-            <div className="max-w-4xl mx-auto flex items-center justify-between">
-              <h2 className="text-xl md:text-2xl font-orbitron-24-bold-italic">
+          <header className="fixed left-0 top-0 z-20 h-16 w-full min-w-0 border-b-2 border-gray-500 bg-white/50 px-4 py-2 shadow-md backdrop-blur-md md:h-16 md:px-6">
+            <div className="mx-auto flex max-w-4xl min-w-0 items-center justify-between gap-2">
+              <h2 className="min-w-0 truncate pr-1 text-xl font-orbitron-24-bold-italic md:text-2xl">
                 Portfolio Gras-Calvet Fernand
               </h2>
 
@@ -82,11 +82,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </div>
           )}
 
-          <main className="relative z-10">
+          <main className="relative z-10 w-full min-w-0 max-w-full min-h-0">
             {children}
           </main>
 
-          <Footer />
+          <div className="relative z-10 w-full min-w-0 shrink-0">
+            <Footer />
+          </div>
 
           <div className="absolute bottom-0 right-0 p-4 text-sm text-gray-500">
             NV : {visitCount}
diff --git a/app/page.tsx b/app/page.tsx
index f214817..b86f01a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -78,7 +78,7 @@ export default function HomePage() {
   const imageUrl = homepage.photo?.url ? `${apiUrl}${homepage.photo.url}` : null;
 
   return (
-    <main className="w-full mx-auto flex flex-col items-center justify-center p-6 bg-white/55 rounded-lg mt-12 mb-3 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
+    <main className="mx-auto mb-3 mt-12 flex w-full min-w-0 max-w-full flex-col items-center justify-center rounded-lg bg-white/55 p-4 sm:max-w-2xl sm:p-6 md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
       <h1 className="text-3xl font-orbitron-24-bold-italic text-gray-800 mb-4">{title}</h1>
 
       {imageUrl ? (
@@ -91,7 +91,7 @@ export default function HomePage() {
         </div>
       )}
 
-      <div className="mt-6 text-lg text-black-700 max-w-2xl font-orbitron-16-bold px-6 text-center">
+      <div className="mt-6 w-full min-w-0 max-w-2xl px-4 text-center text-lg font-orbitron-16-bold text-black-700 sm:px-6">
         <ReactMarkdown>{cv}</ReactMarkdown>
       </div>
     </main>
diff --git a/docs-site-interne/captures/AUDIT-VISUEL.md b/docs-site-interne/captures/AUDIT-VISUEL.md
index 92f5ff7..8edd5c9 100644
--- a/docs-site-interne/captures/AUDIT-VISUEL.md
+++ b/docs-site-interne/captures/AUDIT-VISUEL.md
@@ -5,7 +5,7 @@
 
 ## Objectif
 
-Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger** avec traçabilité (voir aussi les changements dans le code : `app/layout.tsx`, `app/ClientRootLayout.tsx`, `app/page.tsx`, `app/globals.css`).
+Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger** avec traçabilité (code : `app/layout.tsx`, `app/page.tsx`, `app/components/Footer.jsx`, `app/globals.css`).
 
 ## Légende
 
@@ -22,7 +22,7 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*
 
 | Fichier | `01-layout-header-nav-desktop.webp` |
 | **Navigateur** | Google Chrome |
-| **Constats** | Aucun problème majeur. |
+| **Constats** | Aucun problème majeur. Mise en page root renforcée (min-w-0, overflow-x) en parallèle de l’option 1 zoom. |
 | **Statut** | `OK` |
 
 ---
@@ -31,20 +31,25 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*
 
 | Fichier | `02-layout-nav-mobile-ouverte.webp` |
 | **Route** | `/` |
-| **Code** | `app/ClientRootLayout.tsx` (header, overlay menu) |
+| **Code** | `app/layout.tsx` (header, overlay menu) |
 
 ### Constats (validés)
 
 - Bouton **menu burger** trop imposant et « gris » (gros bloc) — à rendre plus discret.
 - Côté **dézoom** (pinch) sur mobile : le **texte Strapi** + **header** se décalent à gauche, effet d’**incohérence** visuelle.
 
-### Piste / correctif appliqué (2026-04-28)
+### Piste / correctif appliqué (2026-04-28) — option 1 (CSS / layout seulement)
 
-- **Burger** : taille **32×32** (`h-8 w-8`), fond **blanc/ léger**, **bordure** fine au lieu du gros `p-2 bg-gray-300` ; icône sur une ligne ; **même bouton** affiche **✕** quand le menu est ouvert (évite l’icône toujours identique) ; `aria-label` / `aria-expanded`.
-- **Décalage au zoom** : `body` + `html` en **`overflow-x: hidden`**, conteneurs en **`min-w-0` / `max-w-full`**, `viewport` explicite (`width=device-width`, `initialScale=1`) via **`app/layout.tsx`** (serveur). Un seul **`<main>`** côté layout ; la home utilise un **`div role="main"`** pour le contenu (évite double `<main>`).
-- **Remarque accessibilité** : le **verrouillage total du zoom** (`user-scalable=no` / `maximum-scale=1`) n’a **pas** été activé : cela pénalise la lecture (WCAG). On a privilégié **mise en page** + **overflow**. Si le problème de dézoom reste, on pourra itérer (contraintes de largeur du markdown, etc.).
+- **Burger** : à affiner (taille, contraste) si besoin — voir capture actuelle.
+- **Décalage au zoom (sans bloquer le zoom)** : pas de `maximum-scale` ni de meta viewport qui impose le zoom. Renfort uniquement côté **CSS** :
+  - `html` / `body` : `overflow-x: hidden`, `min-width: 0`, `max-width: 100%` dans `app/globals.css` ;
+  - grille racine, `<header>`, `<main>`, footer : `min-w-0`, `w-full` / `max-w-full` là où c’est utile (`app/layout.tsx`, `app/components/Footer.jsx`) ;
+  - **`.bg-wallpaper`** : `width: 100%` (plus de `200vw` sur mobile) pour éviter le double de largeur de page et le débordement au pinch-zoom ;
+  - page d’**accueil** : conteneur principal + bloc texte en `min-w-0` / `max-w-full` (`app/page.tsx`).
 
-| **Statut** | `fait` (à valider sur appareil réel) |
+**Accessibilité** : le **verrouillage total du zoom** n’a **pas** été retenu (hors demande) ; on privilégie la mise en page. Si le dézoom reste gênant, on pourra itérer (contraintes sur le markdown, etc.).
+
+| **Statut** | `fait` (à valider sur appareil réel) — opt-in zoom non appliqué pour l’instant |
 
 ---
 
@@ -58,5 +63,5 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*
 ## Suite
 
 | Prochain | Fichier |
-|----------|--------|
-| 04 | `04-accueil-hero-mobile.webp` puis 05… |
\ No newline at end of file
+|----------|---------|
+| 04 | `04-accueil-hero-mobile.webp` puis 05… |
