CSS Mobile retravailler

css/styles.css

@@ -1,4 +1,4 @@
-/* VARIABLES / RESET */
+/* Variables & Reset */
 :root {
     --vert-fonce: #154e1f;
     --vert-clair: #659b1f;
@@ -14,22 +14,22 @@
 }
 
 body {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    background-color: var(--fond-gris);
     color: var(--texte-sombre);
     line-height: 1.5;
     overflow-x: hidden;
+    background: #f4f6f4;
+    font-family: "Arial Black", serif;
 }
 
-/* HEADER */
+/* Header */
 header {
     background-color: var(--blanc);
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1.5rem 1rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     text-align: center;
+    border-bottom: #154e1f solid 2px;
 }
 
 #logo {
@@ -41,34 +41,39 @@ header {
 header h1 {
     color: var(--vert-fonce);
     font-size: 1.4rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
-/* SOCIALS */
+/* Réseaux Sociaux */
 .réseaux {
+    background-color: var(--blanc);
     display: flex;
-    gap: 1.2rem;
+    justify-content: center;
+    gap: 2rem;
+    padding: 10px 0px 15px 0px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .réseaux a {
     color: var(--vert-fonce);
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     text-decoration: none;
-    transition: color 0.3s;
+    transition: color 0.3s, transform 0.2s;
 }
 
 .réseaux a:active,
 .réseaux a:hover {
     color: var(--vert-clair);
+    transform: scale(1.1);
 }
 
-/* MAIN */
+/* Main */
 main {
-    padding: 1rem;
+    max-width: 1200px;
-    max-width: 1200px; /* Limite la largeur sur grand écran */
+    margin: 0 auto;
-    margin: 0 auto;    /* Centre le contenu */
+    padding: 0 1rem;
 }
 
 hr {
@@ -79,8 +84,8 @@ hr {
     margin: 2rem 0;
 }
 
-/* BANNER */
+/* Bannière */
-section:first-of-type {
+.banner {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -88,15 +93,18 @@ section:first-of-type {
 }
 
 #photo {
-    width: calc(100% + 2rem);
+    width: 100vw;
-    margin: 50px 50px 50px 50px ;
+    margin-left: calc(-50vw + 50%);
-    height: 50%;
+    margin-right: calc(-50vw + 50%);
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    height: 250px;
     object-fit: cover;
     border-radius: 0;
     box-shadow: none;
 }
 
-/* PROJECTS */
+/* Projets */
 .projets h2 {
     color: var(--vert-fonce);
     text-align: center;
@@ -104,7 +112,7 @@ section:first-of-type {
     margin-bottom: 0.2rem;
 }
 
-/* INDICATOR */
+/* Indicateur de Défilement */
 .projets h2::after {
     content: "\f337  Glissez pour voir plus";
     font-family: "Font Awesome 6 Free";
@@ -116,7 +124,7 @@ section:first-of-type {
     margin-bottom: 1.5rem;
 }
 
-/* CAROUSEL */
+/* Carrousel */
 .projets > div {
     display: flex;
     flex-direction: row;
@@ -129,7 +137,7 @@ section:first-of-type {
     scrollbar-color: var(--vert-clair) rgba(0,0,0,0.05);
 }
 
-/* SCROLLBAR WEBKIT */
+/* Scrollbar Personnalisée */
 .projets > div::-webkit-scrollbar {
     height: 6px;
     display: block;
@@ -145,7 +153,7 @@ section:first-of-type {
     border-radius: 10px;
 }
 
-/* CARDS */
+/* Cartes Projets */
 .projets > div > div {
     flex: 0 0 100%;
     scroll-snap-align: center;
@@ -168,78 +176,85 @@ section:first-of-type {
     font-size: 0.95rem;
 }
 
-/* CONTACT */
+/* Footer */
-.contact {
+footer {
-    background-color: var(--blanc);
+    background-color: rgb(78 125 19 / 0.88);
-    padding: 2rem 1rem;
+    color: var(--blanc);
-    border-radius: 8px;
     text-align: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    padding: 2rem 1rem;
+    margin-top: 2rem;
+    font-size: 0.95rem;
 }
 
-.contact h2 {
+/* Footer Layout */
-    color: var(--vert-fonce);
+.footer-sections {
-    font-size: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
     margin-bottom: 1rem;
 }
 
-.contact h3 {
+.footer-block {
-    color: var(--vert-clair);
+    width: 100%;
+}
+
+.footer-block h3 {
     font-size: 1.2rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
-    margin-top: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
 
-.contact p {
+.footer-block p {
-    font-size: 1rem;
+    display: flex;
-    font-weight: 500;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 0.8rem;
+    word-break: break-word;
 }
 
-/* FOOTER */
+.footer-block i {
-footer {
+    width: 20px;
-    background-color: var(--vert-fonce);
-    color: var(--blanc);
     text-align: center;
-    padding: 1.5rem 1rem;
-    margin-top: 2rem;
-    font-size: 0.85rem;
 }
 
-/* =========================================
+/* Media Queries */
-   MEDIA QUERIES (Tablette & Desktop)
-========================================= */
 @media (min-width: 768px) {
-
-    /* Force la bannière à toucher les bords de l'écran */
     #photo {
-        width: 100vw; /* 100% de la largeur de l'écran */
+        height: 350px;
-        margin-left: calc(-50vw + 50%); /* Astuce pour sortir du conteneur centré */
-        margin-right: calc(-50vw + 50%);
-        margin-top: -1rem; /* Pour rester collé en haut */
         margin-bottom: 2rem;
-        height: 350px; /* On l'agrandit un peu pour les grands écrans */
-        border-radius: 0; /* Pas de bords arrondis */
     }
 
-    /* Supprime l'indicateur tactile "Glissez" */
     .projets h2::after {
         display: none;
     }
 
-    /* Grille 3x3 pour les projets */
     .projets > div {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 1.5rem;
-
-        /* Annule le comportement du carrousel */
         overflow-x: visible;
         scroll-snap-type: none;
         padding-bottom: 0;
     }
 
-    /* Ajustement des cartes pour la grille */
     .projets > div > div {
-        flex: auto; /* Annule la largeur forcée du carrousel */
+        flex: auto;
+    }
+
+    .footer-sections {
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: flex-start;
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: left;
+    }
+
+    .footer-block p {
+        justify-content: flex-start;
     }
 }

index.html

@@ -8,24 +8,30 @@
     <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
+
+<!-- Header Principal (Sans les réseaux) -->
 <header>
     <img src="assets/images/logo.png" alt="logo" id="logo">
     <h1>FERNANDO PAYSAGISTE</h1>
-            <!--   <div class="réseaux">
+</header>
+
+<!-- Barre des Réseaux Sociaux juste sous le header -->
+<div class="réseaux">
     <a href="https://www.instagram.com/fernando.paysagiste/"><i class="fa-brands fa-instagram"></i></a>
     <a href="https://www.youtube.com/@Fernando-i6k3i"><i class="fa-brands fa-youtube"></i></a>
     <a href="https://www.tiktok.com/@fernandoklein505"><i class="fa-brands fa-tiktok"></i></a>
     <a href="https://www.linkedin.com/in/fernando-klein-72540a419/"><i class="fa-brands fa-linkedin"></i></a>
-            </div> -->
+</div>
-        </header>
+
 <main>
-        <section>
+    <section class="banner">
         <img src="assets/images/photo_6.png" alt="photo" id="photo">
         <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>
-            <br>
         <div>
             <div>
                 <img src="assets/images/photo_1.jpg" alt="photo" id="photo1">
@@ -59,15 +65,21 @@
 </main>
 
 <footer>
-            <h2>Contact & Disponibilité</h2>
+    <div class="footer-sections">
+        <div class="footer-block">
             <h3>Disponibilité</h3>
             <p>Lundi au Vendredi : 8h à 20h</p>
             <p>Samedi uniquement la matinée</p>
+        </div>
 
+        <div class="footer-block">
             <h3>Contact</h3>
             <p><i class="fa-solid fa-phone"></i> 07.63.02.73.56 </p>
             <p><i class="fa-solid fa-envelope"></i> fernando.paysagiste@gmail.com</p>
             <p><i class="fa-solid fa-location-dot"></i> Nancy</p>
+        </div>
+    </div>
+
     <br>
     <p>&copy; 2026 FERNANDO PAYSAGISTE. Tous droits réservés.</p>
 </footer>