Tablet et laptop version

css/styles.css

@@ -92,6 +92,15 @@ hr {
     text-align: justify;
 }
 
+.banner p {
+    border-top: 2px solid var(--vert-clair);
+    border-bottom: 2px solid var(--vert-clair);
+    padding: 0px 15px;
+    margin: 1rem 0;
+    font-size: 14px;
+}
+
+/* Image principale (Mobile & Tablette) */
 #photo {
     width: 100vw;
     margin-left: calc(-50vw + 50%);
@@ -102,6 +111,12 @@ hr {
     object-fit: cover;
     border-radius: 0;
     box-shadow: none;
+    display: block; /* On s'assure qu'elle est visible */
+}
+
+/* On masque la petite image sur mobile et tablette */
+#photosmall {
+    display: none;
 }
 
 /* Projets */
@@ -115,7 +130,6 @@ hr {
 /* Indicateur de Défilement */
 .projets h2::after {
     content: "\f337  Glissez pour voir plus";
-    font-family: "Font Awesome 6 Free";
     font-weight: 900;
     display: block;
     font-size: 0.9rem;
@@ -227,6 +241,10 @@ footer {
         margin-bottom: 2rem;
     }
 
+    .banner p {
+        font-size: 20px;
+    }
+
     .projets h2::after {
         display: none;
     }
@@ -251,10 +269,71 @@ footer {
         max-width: 800px;
         margin-left: auto;
         margin-right: auto;
-        text-align: left;
+        text-align: center;
     }
 
     .footer-block p {
-        justify-content: flex-start;
+        justify-content: center;
     }
+}
+
+@media (min-width: 1024px) {
+
+    /* Organisation de la bannière */
+    .banner {
+        flex-direction: row-reverse;
+        width: 100vw;
+        margin-left: calc(-50vw + 50%);
+        margin-right: calc(-50vw + 50%);
+        align-items: center;
+        margin-bottom: 3rem;
+        border-top: 2px solid var(--vert-clair);
+        border-bottom: 2px solid var(--vert-clair);
+    }
+
+    /* Le texte de la bannière */
+    .banner p {
+        width: 45vw;
+        margin: 0;
+        border: none;
+        font-size: 22px;
+        word-spacing: -3px;
+        padding: 0px 0px 0px 30px;
+
+    }
+
+    /* On masque la grande photo */
+    #photo {
+        display: none;
+    }
+
+    /* On affiche et on stylise la petite photo (avec l'effet de dégradé) */
+    #photosmall {
+        display: block; /* Affiche l'image */
+        width: 55vw;
+        height: 450px;
+        margin: 0;
+        object-fit: cover; /* Assure que l'image ne se déforme pas */
+        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
+        mask-image: linear-gradient(to right, transparent 0%, black 25%);
+    }
+
+    .projets img {
+        height: 320px;
+        transition: transform 0.4s ease; /* Rend le zoom fluide */
+    }
+
+    /* Effet de zoom au passage de la souris */
+    .projets > div > div:hover img {
+        transform: scale(1.08); /* Grossit l'image de 8% */
+    }
+
+    @media (min-width: 1440px) {
+
+        .banner p {
+            font-size: 25px ;
+        }
+
+    }
+
 }

index.html

@@ -26,12 +26,13 @@
 <main>
     <section class="banner">
         <img src="assets/images/photo_6.png" alt="photo" id="photo">
+        <img src="assets/images/photo_6_small.png" alt="photo" id="photosmall">
         <p>Fernando Paysagiste est une autoentreprise de proximité, spécialisée dans la création et l'entretien d'espaces verts. De la tonte à l'aménagement complet de votre jardin, chaque intervention est réalisée avec professionnalisme, passion et souci du détail. Mon objectif est de vous offrir un extérieur harmonieux, agréable à vivre et adapté à vos besoins.</p>
     </section>
     <br>
 
     <section class="projets">
-        <h2>Galerie de mes projets</h2>
+        <h2>Mes Travaux</h2>
         <div>
             <div>
                 <img src="assets/images/photo_1.jpg" alt="photo" id="photo1">