diff --git a/img/hero-bg-mobile.webp b/img/hero-bg-mobile.webp
new file mode 100644
index 0000000..36309d5
Binary files /dev/null and b/img/hero-bg-mobile.webp differ
diff --git a/public/config.json b/public/config.json
index d68b83d..3df30a9 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,4 +1,5 @@
 {
   "heroVideo": "/video/home.mp4",
-  "heroBg": "/img/hero-bg.webp"
+  "heroBg": "/img/hero-bg.webp",
+  "heroBgMobile": "/img/hero-bg-mobile.webp"
 }
diff --git a/src/App.jsx b/src/App.jsx
index ed84e0d..e77728f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,12 +6,16 @@ import GuideSection from './components/GuideSection'
 import Footer from './components/Footer'
 
 export default function App() {
-  const [bgSrc, setBgSrc] = useState(null)
+  const [bgSrc,       setBgSrc]       = useState(null)
+  const [bgMobileSrc, setBgMobileSrc] = useState(null)
 
   useEffect(() => {
     fetch('/config.json')
       .then(r => r.json())
-      .then(data => setBgSrc(data.heroBg ?? null))
+      .then(data => {
+        if (data.heroBg)       setBgSrc(data.heroBg)
+        if (data.heroBgMobile) setBgMobileSrc(data.heroBgMobile)
+      })
       .catch(() => {})
   }, [])
 
@@ -19,9 +23,9 @@ export default function App() {
     <div className="min-h-screen bg-[#19392e]">
       <Navbar />
       <main>
-        <Hero bgSrc={bgSrc} />
+        <Hero bgSrc={bgSrc} bgMobileSrc={bgMobileSrc} />
         <ComparisonSection />
-        <GuideSection bgSrc={bgSrc} />
+        <GuideSection bgSrc={bgSrc} bgMobileSrc={bgMobileSrc} />
       </main>
       <Footer />
     </div>
diff --git a/src/components/ComparisonSection.jsx b/src/components/ComparisonSection.jsx
index d54c9e9..15c731a 100644
--- a/src/components/ComparisonSection.jsx
+++ b/src/components/ComparisonSection.jsx
@@ -107,13 +107,13 @@ export default function ComparisonSection() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="text-center mb-14"
+          className="text-center mb-8 sm:mb-14"
         >
           <div className="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-700 text-xs font-bold px-3 py-1.5 rounded-full mb-5">
             <FiAward size={13} />
             Classement officiel 2026
           </div>
-          <h2 className="text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
+          <h2 className="text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-4">
             Les meilleures mutuelles santé
           </h2>
           <p className="text-slate-500 max-w-xl mx-auto leading-relaxed">
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 588d4fb..b8bddfd 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -23,11 +23,10 @@ const colLegal = [
 export default function Footer() {
   return (
     <footer className="bg-[#19392e]">
-
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
         {/* Main grid */}
-        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 py-16">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-8 py-10 lg:py-16">
 
           {/* Brand */}
           <motion.div
@@ -35,9 +34,9 @@ export default function Footer() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.45, delay: 0 }}
-            className="sm:col-span-2 lg:col-span-1"
+            className="col-span-2 lg:col-span-1 flex flex-col items-center lg:items-start text-center lg:text-left"
           >
-            <div className="flex items-center gap-2.5 mb-5">
+            <div className="flex items-center gap-2.5 mb-4">
               <img
                 src="/img/ico.webp"
                 alt="AssurezMoi"
@@ -47,44 +46,36 @@ export default function Footer() {
               />
               <AnimatedBrandName lightText />
             </div>
-            <address className="not-italic text-sm text-[#fffef6]/60 leading-relaxed mb-4">
+            <address className="not-italic text-sm text-[#fffef6]/60 leading-relaxed mb-3">
               Votre comparateur d'assurances<br />
               1 Rue john doe<br />
               59100 Roubaix, France
             </address>
-            <a
-              href="mailto:contact@assurezmoi.com"
-              className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors"
-            >
-              contact@assurezmoi.com
-            </a>
-            <div className="mt-2">
-              <a
-                href="tel:+33180891030"
-                className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors"
-              >
+            <div className="flex flex-col gap-1 items-center lg:items-start">
+              <a href="mailto:contact@assurezmoi.com" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
+                contact@assurezmoi.com
+              </a>
+              <a href="tel:+33180891030" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
                 01 02 03 04 05
               </a>
             </div>
           </motion.div>
 
-          {/* Resources */}
+          {/* Ressources */}
           <motion.div
             initial={{ opacity: 0, y: 24 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.45, delay: 0.1 }}
+            className="flex flex-col items-center lg:items-start text-center lg:text-left"
           >
-            <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-5">
+            <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-4">
               Ressources
             </h4>
-            <ul className="space-y-3">
+            <ul className="space-y-2.5">
               {colResources.map((r) => (
                 <li key={r}>
-                  <a
-                    href="#"
-                    className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors flex items-center gap-1 group"
-                  >
+                  <a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors inline-flex items-center gap-1 group">
                     {r}
                     <FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                   </a>
@@ -93,23 +84,21 @@ export default function Footer() {
             </ul>
           </motion.div>
 
-          {/* Discover */}
+          {/* Nous découvrir */}
           <motion.div
             initial={{ opacity: 0, y: 24 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.45, delay: 0.2 }}
+            className="flex flex-col items-center lg:items-start text-center lg:text-left"
           >
-            <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-5">
+            <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-4">
               Nous découvrir
             </h4>
-            <ul className="space-y-3">
+            <ul className="space-y-2.5">
               {colDiscover.map((d) => (
                 <li key={d}>
-                  <a
-                    href="#"
-                    className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors flex items-center gap-1 group"
-                  >
+                  <a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors inline-flex items-center gap-1 group">
                     {d}
                     <FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                   </a>
@@ -118,19 +107,20 @@ export default function Footer() {
             </ul>
           </motion.div>
 
-          {/* Legal */}
+          {/* Informations légales */}
           <motion.div
             initial={{ opacity: 0, y: 24 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.45, delay: 0.3 }}
+            className="col-span-2 lg:col-span-1 flex flex-col items-center lg:items-start text-center lg:text-left"
           >
-            <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-5">
+            <h4 className="text-[#fffef6] font-bold text-sm uppercase tracking-widest mb-4">
               Informations légales
             </h4>
-            <ul className="space-y-3">
+            <ul className="grid grid-cols-2 lg:block gap-x-6 gap-y-2.5 lg:space-y-2.5 w-full">
               {colLegal.map((l) => (
-                <li key={l}>
+                <li key={l} className="text-center lg:text-left">
                   <a href="#" className="text-sm text-[#fffef6]/60 hover:text-[#9CCC8A] transition-colors">
                     {l}
                   </a>
@@ -146,7 +136,7 @@ export default function Footer() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.4, delay: 0.1 }}
-          className="border-t border-white/10 py-6 flex items-center justify-center"
+          className="border-t border-white/10 py-5 flex items-center justify-center"
         >
           <p className="text-xs text-[#fffef6]/40 text-center">
             © 2026 AssurezMoi — Tous droits réservés.
diff --git a/src/components/GuideSection.jsx b/src/components/GuideSection.jsx
index 1f9984c..974ac6a 100644
--- a/src/components/GuideSection.jsx
+++ b/src/components/GuideSection.jsx
@@ -50,12 +50,23 @@ function FaqItem({ faq, index }) {
   )
 }
 
-export default function GuideSection({ bgSrc }) {
+export default function GuideSection({ bgSrc, bgMobileSrc }) {
   return (
-    <section
-      className="relative py-0 bg-cover bg-center bg-fixed"
-      style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : { backgroundColor: '#19392e' }}
-    >
+    <section className="relative py-0" style={!bgSrc ? { backgroundColor: '#19392e' } : {}}>
+      {/* Fond mobile (portrait) */}
+      {(bgMobileSrc || bgSrc) && (
+        <div
+          className="md:hidden absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${bgMobileSrc || bgSrc})` }}
+        />
+      )}
+      {/* Fond desktop (paysage, parallax) */}
+      {bgSrc && (
+        <div
+          className="hidden md:block absolute inset-0 bg-cover bg-center bg-fixed"
+          style={{ backgroundImage: `url(${bgSrc})` }}
+        />
+      )}
       {/* Overlay */}
       <div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />
 
@@ -73,7 +84,7 @@ export default function GuideSection({ bgSrc }) {
         </svg>
       </div>
 
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-48 pb-48">
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 md:pt-48 pb-24 md:pb-48">
 
         <motion.div
           initial={{ opacity: 0, y: 24 }}
@@ -82,7 +93,7 @@ export default function GuideSection({ bgSrc }) {
           transition={{ duration: 0.5 }}
           className="text-center mb-14"
         >
-          <h2 className="text-4xl font-extrabold text-[#fffef6] tracking-tight mb-4">
+          <h2 className="text-2xl sm:text-4xl font-extrabold text-[#fffef6] tracking-tight mb-4">
             Tout savoir sur la mutuelle santé
           </h2>
           <p className="text-[#fffef6]/60 max-w-xl mx-auto">
@@ -90,7 +101,7 @@ export default function GuideSection({ bgSrc }) {
           </p>
         </motion.div>
 
-        <div className="grid lg:grid-cols-3 gap-12">
+        <div className="grid lg:grid-cols-3 gap-6 lg:gap-12">
 
           {/* FAQ accordéon */}
           <div className="lg:col-span-2 space-y-3">
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 521002e..096d869 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -30,7 +30,7 @@ function VideoPlayer({ src }) {
   }
 
   return (
-    <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/30 bg-slate-900 w-full h-full min-h-[320px]">
+    <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/30 bg-slate-900 w-full h-full min-h-[220px] md:min-h-[320px]">
       {src ? (
         <video
           ref={videoRef}
@@ -79,7 +79,7 @@ function VideoPlayer({ src }) {
   )
 }
 
-export default function Hero({ bgSrc }) {
+export default function Hero({ bgSrc, bgMobileSrc }) {
   const [videoSrc, setVideoSrc] = useState(null)
 
   useEffect(() => {
@@ -90,10 +90,21 @@ export default function Hero({ bgSrc }) {
   }, [])
 
   return (
-    <section
-      className="relative bg-cover bg-center bg-fixed pt-28 pb-48"
-      style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : {}}
-    >
+    <section className="relative pt-20 md:pt-28 pb-36 md:pb-48">
+      {/* Fond mobile (portrait) */}
+      {(bgMobileSrc || bgSrc) && (
+        <div
+          className="md:hidden absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${bgMobileSrc || bgSrc})` }}
+        />
+      )}
+      {/* Fond desktop (paysage, parallax) */}
+      {bgSrc && (
+        <div
+          className="hidden md:block absolute inset-0 bg-cover bg-center bg-fixed"
+          style={{ backgroundImage: `url(${bgSrc})` }}
+        />
+      )}
       {/* Overlay */}
       <div className="pointer-events-none absolute inset-0 bg-[#19392e]/70 backdrop-blur-[2px]" />
 
@@ -112,7 +123,7 @@ export default function Hero({ bgSrc }) {
           transition={{ duration: 0.55 }}
           className="text-center mb-12"
         >
-          <h1 className="text-5xl xl:text-7xl font-extrabold text-[#fffef6] leading-[1.05] tracking-tight mb-5">
+          <h1 className="text-3xl sm:text-5xl xl:text-7xl font-extrabold text-[#fffef6] leading-[1.05] tracking-tight mb-5">
             Mutuelle santé{' '}
             <span className="relative inline-block">
               <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-[#9CCC8A] to-[#5BAF7A]">
@@ -140,7 +151,7 @@ export default function Hero({ bgSrc }) {
             initial={{ opacity: 0, x: -28 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.55, delay: 0.3 }}
-            className="bg-[#19392e]/80 backdrop-blur-sm rounded-3xl border border-white/10 shadow-xl shadow-black/30 p-8 flex flex-col justify-between"
+            className="bg-[#19392e]/80 backdrop-blur-sm rounded-3xl border border-white/10 shadow-xl shadow-black/30 p-5 sm:p-8 flex flex-col justify-between"
           >
             <div>
               <p className="text-lg text-[#fffef6]/80 leading-relaxed mb-6">
@@ -159,16 +170,16 @@ export default function Hero({ bgSrc }) {
               </ul>
 
               {/* CTAs */}
-              <div className="flex flex-wrap gap-3 mb-8">
+              <div className="flex flex-col sm:flex-row flex-wrap gap-3 mb-8">
                 <motion.button
                   whileHover={{ scale: 1.025 }}
                   whileTap={{ scale: 0.97 }}
-                  className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-[#9CCC8A]/40 transition-all"
+                  className="flex items-center justify-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-[#9CCC8A]/40 transition-all w-full sm:w-auto"
                 >
                   Comparer les mutuelles
                   <FiArrowRight />
                 </motion.button>
-                <button className="flex items-center gap-2 font-semibold text-[#fffef6]/80 text-base px-7 py-3.5 rounded-xl border border-white/20 bg-white/5 hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all">
+                <button className="flex items-center justify-center gap-2 font-semibold text-[#fffef6]/80 text-base px-7 py-3.5 rounded-xl border border-white/20 bg-white/5 hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all w-full sm:w-auto">
                   Voir le classement
                 </button>
               </div>
diff --git a/src/components/MutuelleCard.jsx b/src/components/MutuelleCard.jsx
index f27cb4d..34390ec 100644
--- a/src/components/MutuelleCard.jsx
+++ b/src/components/MutuelleCard.jsx
@@ -139,10 +139,10 @@ export default function MutuelleCard({ mutuelle }) {
         href={mutuelle.lien}
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-center gap-2 text-white font-bold text-sm px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
+        className="flex items-center gap-1.5 text-white font-bold text-sm px-3 sm:px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
         style={{ backgroundColor: mutuelle.couleur }}
       >
-        Voir l'offre
+        <span className="hidden sm:inline">Voir l'offre</span>
         <FiArrowRight />
       </a>
     </div>