CSS mobile

css/styles.css

@@ -0,0 +1,245 @@
+/* VARIABLES / RESET */
+:root {
+    --vert-fonce: #154e1f;
+    --vert-clair: #659b1f;
+    --blanc: #ffffff;
+    --fond-gris: #f4f6f4;
+    --texte-sombre: #2c3e50;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    background-color: var(--fond-gris);
+    color: var(--texte-sombre);
+    line-height: 1.5;
+    overflow-x: hidden;
+}
+
+/* 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;
+}
+
+#logo {
+    width: 120px;
+    height: auto;
+    margin-bottom: 0.5rem;
+}
+
+header h1 {
+    color: var(--vert-fonce);
+    font-size: 1.4rem;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* SOCIALS */
+.réseaux {
+    display: flex;
+    gap: 1.2rem;
+}
+
+.réseaux a {
+    color: var(--vert-fonce);
+    font-size: 1.5rem;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.réseaux a:active,
+.réseaux a:hover {
+    color: var(--vert-clair);
+}
+
+/* MAIN */
+main {
+    padding: 1rem;
+    max-width: 1200px; /* Limite la largeur sur grand écran */
+    margin: 0 auto;    /* Centre le contenu */
+}
+
+hr {
+    border: none;
+    height: 1px;
+    background-color: var(--vert-clair);
+    opacity: 0.3;
+    margin: 2rem 0;
+}
+
+/* BANNER */
+section:first-of-type {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: justify;
+}
+
+#photo {
+    width: calc(100% + 2rem);
+    margin: 50px 50px 50px 50px ;
+    height: 50%;
+    object-fit: cover;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+/* PROJECTS */
+.projets h2 {
+    color: var(--vert-fonce);
+    text-align: center;
+    font-size: 1.5rem;
+    margin-bottom: 0.2rem;
+}
+
+/* INDICATOR */
+.projets h2::after {
+    content: "\f337  Glissez pour voir plus";
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+    display: block;
+    font-size: 0.9rem;
+    color: #7f8c8d;
+    margin-top: 0.4rem;
+    margin-bottom: 1.5rem;
+}
+
+/* CAROUSEL */
+.projets > div {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    padding-bottom: 1.5rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--vert-clair) rgba(0,0,0,0.05);
+}
+
+/* SCROLLBAR WEBKIT */
+.projets > div::-webkit-scrollbar {
+    height: 6px;
+    display: block;
+}
+
+.projets > div::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.05);
+    border-radius: 10px;
+}
+
+.projets > div::-webkit-scrollbar-thumb {
+    background: var(--vert-clair);
+    border-radius: 10px;
+}
+
+/* CARDS */
+.projets > div > div {
+    flex: 0 0 100%;
+    scroll-snap-align: center;
+    background-color: var(--blanc);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.projets img {
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+    display: block;
+}
+
+.projets p {
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.95rem;
+}
+
+/* CONTACT */
+.contact {
+    background-color: var(--blanc);
+    padding: 2rem 1rem;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+.contact h2 {
+    color: var(--vert-fonce);
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.contact h3 {
+    color: var(--vert-clair);
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+    margin-top: 1rem;
+}
+
+.contact p {
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+/* FOOTER */
+footer {
+    background-color: var(--vert-fonce);
+    color: var(--blanc);
+    text-align: center;
+    padding: 1.5rem 1rem;
+    margin-top: 2rem;
+    font-size: 0.85rem;
+}
+
+/* =========================================
+   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 */
+        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 */
+    }
+}

index.html

@@ -11,12 +11,12 @@
         <header>
             <img src="assets/images/logo.png" alt="logo" id="logo">
             <h1>FERNANDO PAYSAGISTE</h1>
-            <div class="réseaux">
+            <!--   <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>