From 6d2e96ec5f1c2deb83fa645640061ad41af2257c Mon Sep 17 00:00:00 2001
From: Ladebeze66 <fgras.ca@gmail.com>
Date: Wed, 19 Feb 2025 15:50:11 +0100
Subject: [PATCH] responsive

---
 app/assets/main.css       |  2 +-
 app/components/Footer.jsx |  2 +-
 app/contact/page.js       |  2 +-
 app/globals.css           | 23 +++++++++++++++++++++++
 app/layout.tsx            |  2 +-
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 5dd020c..ce00f62 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -100,7 +100,7 @@
 @media (max-width: 768px) {
   .bg-wallpaper {
     background-size: auto 100%;
-    background-position: center center;
+    background-position: center;
     min-height: 100vh;
     min-width: 200vw;
   }
diff --git a/app/components/Footer.jsx b/app/components/Footer.jsx
index 913ea57..66c3e9e 100644
--- a/app/components/Footer.jsx
+++ b/app/components/Footer.jsx
@@ -10,7 +10,7 @@ export default function Footer() {
   }
 
   return (
-    <footer className="bg-white/50 backdrop-blur rounded-lg">
+    <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">
         <p>&copy; {new Date().getFullYear()} Gras-Calvet Fernand</p>
       </div>
diff --git a/app/contact/page.js b/app/contact/page.js
index 44e4bdd..5422b1d 100644
--- a/app/contact/page.js
+++ b/app/contact/page.js
@@ -5,7 +5,7 @@ export default function ContactPage() {
   const apiUrl = getApiUrl();
 
   return (
-    <div className="max-w-3xl mx-auto p-6">
+    <div className="max-w-3xl mx-auto p-6 flex flex-col justify-top min-h-screen">
       <h1 className="bg-white/50 rounded-md text-3xl font-orbitron-24-bold text-center mb-6 border-b-4 border-blue-500 pb-2">
         📬 Correspondance
       </h1>
diff --git a/app/globals.css b/app/globals.css
index 9f66153..d051c1c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -52,4 +52,27 @@ body {
 
 .wait-animation .dot-3 {
   animation: blink 1s infinite 0.4s;
+}
+
+/* Alignement général pour la mise en page */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px;
+}
+
+/* Gestion du footer */
+footer {
+  text-align: center;
+  padding: 16px;
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+}
+
+/* Responsive footer */
+@media (max-width: 768px) {
+  footer {
+    padding: 12px;
+  }
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index fe7e4a2..fd95548 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -64,7 +64,7 @@ export default function RootLayout({ children }) {
 
           {/* Menu mobile */}
           {isMenuOpen && (
-            <div ref={menuRef} className="fixed inset-0 bg-black/50 z-40 flex items-start justify-end p-4">
+            <div ref={menuRef} className="fixed inset-0 bg-black/50 z-40 flex items-start justify-center p-4">
               <nav className="w-[60%] max-w-sm h-auto min-h-[50vh] max-h-[50vh] bg-gray-800/90 backdrop-blur-lg flex flex-col items-center justify-center space-y-4 z-50 md:hidden text-white font-orbitron-24-bold tracking-wide shadow-lg overflow-y-auto rounded-lg p-6">
                 {/* Bouton de fermeture */}
                 <button className="absolute top-4 right-4 text-2xl text-white" onClick={toggleMenu}>