d

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">