diff --git a/css/styles.css b/css/styles.css
index 87df1dd..d033e2e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,10 +1,24 @@
-/* Variables & Reset */
+/* ==========================================================================
+   Variables & Reset
+   ========================================================================== */
 :root {
-    --vert-fonce: #154e1f;
-    --vert-clair: #659b1f;
+    --vert-fonce: #123a1a;
+    --vert-fonce-2: #154e1f;
+    --vert-clair: #6bab21;
+    --vert-pale: #eef4e8;
     --blanc: #ffffff;
-    --fond-gris: #f4f6f4;
-    --texte-sombre: #2c3e50;
+    --fond-gris: #f6f8f4;
+    --texte-sombre: #202b22;
+    --texte-doux: #55635a;
+
+    --font-titres: "Poppins", "Segoe UI", sans-serif;
+    --font-texte: "Inter", "Segoe UI", sans-serif;
+
+    --rayon: 14px;
+    --rayon-lg: 22px;
+    --ombre: 0 10px 30px rgba(18, 58, 26, 0.1);
+    --ombre-forte: 0 20px 45px rgba(18, 58, 26, 0.18);
+    --transition: 0.3s ease;
 }
 
 * {
@@ -13,134 +27,489 @@
     box-sizing: border-box;
 }
 
-body {
-    color: var(--texte-sombre);
-    line-height: 1.5;
-    overflow-x: hidden;
-    background: #f4f6f4;
-    font-family: "Arial Black", serif;
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 90px;
 }
 
-/* Header */
-header {
-    background-color: var(--blanc);
-    display: flex;
-    flex-direction: column;
+body {
+    color: var(--texte-sombre);
+    line-height: 1.6;
+    overflow-x: hidden;
+    background: var(--fond-gris);
+    font-family: var(--font-texte);
+    font-size: 16px;
+}
+
+h1, h2, h3 {
+    font-family: var(--font-titres);
+    color: var(--vert-fonce);
+    line-height: 1.25;
+}
+
+img {
+    max-width: 100%;
+}
+
+a {
+    color: inherit;
+}
+
+/* ==========================================================================
+   Boutons
+   ========================================================================== */
+.btn {
+    display: inline-flex;
     align-items: center;
-    padding: 1.5rem 1rem;
-    text-align: center;
-    border-bottom: #154e1f solid 2px;
+    justify-content: center;
+    gap: 0.6rem;
+    padding: 0.9rem 1.8rem;
+    border-radius: 999px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
+    border: 2px solid transparent;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background: var(--vert-clair);
+    color: var(--blanc);
+    box-shadow: 0 10px 25px rgba(107, 171, 33, 0.35);
+}
+
+.btn-primary:hover {
+    background: var(--vert-fonce-2);
+    transform: translateY(-2px);
+    box-shadow: 0 14px 30px rgba(21, 78, 31, 0.35);
+}
+
+.btn-outline {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--blanc);
+    border-color: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+.btn-outline:hover {
+    background: var(--blanc);
+    color: var(--vert-fonce);
+    transform: translateY(-2px);
+}
+
+.btn-light {
+    background: var(--blanc);
+    color: var(--vert-fonce);
+}
+
+.btn-light:hover {
+    background: var(--vert-pale);
+    transform: translateY(-2px);
+}
+
+/* ==========================================================================
+   Header
+   ========================================================================== */
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(21, 78, 31, 0.1);
+}
+
+.header-inner {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0.7rem 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    text-decoration: none;
+    font-family: var(--font-titres);
+    color: var(--vert-fonce);
+    font-size: 1.05rem;
+    letter-spacing: 0.3px;
+}
+
+.brand strong {
+    color: var(--vert-clair);
 }
 
 #logo {
-    width: 120px;
-    height: auto;
-    margin-bottom: 0.5rem;
+    width: 44px;
+    height: 44px;
+    object-fit: contain;
 }
 
-header h1 {
-    color: var(--vert-fonce);
-    font-size: 1.4rem;
-    margin-bottom: 0;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
-/* Réseaux Sociaux */
-.réseaux {
-    background-color: var(--blanc);
-    display: flex;
-    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.8rem;
-    text-decoration: none;
-    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 {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1rem;
-}
-
-hr {
-    border: none;
-    height: 1px;
-    background-color: var(--vert-clair);
-    opacity: 0.3;
-    margin: 2rem 0;
-}
-
-/* Bannière */
-.banner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    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%);
-    margin-right: calc(-50vw + 50%);
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-    height: 250px;
-    object-fit: cover;
-    border-radius: 0;
-    box-shadow: none;
-    display: block;
-}
-
-/* On masque les images spécifiques aux PC sur mobile et tablette */
-#photosmall,
-#photolarge {
+.nav-toggle {
     display: none;
 }
 
-/* Projets */
-.projets h2 {
+.nav-burger {
+    display: none;
+    position: relative;
+    width: 28px;
+    height: 22px;
+    cursor: pointer;
+    z-index: 110;
+}
+
+.nav-burger span,
+.nav-burger::before,
+.nav-burger::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 2.5px;
+    background: var(--vert-fonce);
+    border-radius: 2px;
+    transition: transform var(--transition), opacity var(--transition), top var(--transition);
+}
+
+.nav-burger::before { top: 0; }
+.nav-burger span { top: 10px; }
+.nav-burger::after { top: 20px; }
+
+/* Navigation desktop (inline dans le header) */
+.nav-desktop {
+    display: none;
+    align-items: center;
+    gap: 1.6rem;
+}
+
+.nav-desktop a {
+    text-decoration: none;
+    color: var(--texte-sombre);
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: color var(--transition);
+}
+
+.nav-desktop a:hover {
+    color: var(--vert-clair);
+}
+
+.nav-desktop .nav-socials {
+    padding-left: 0.4rem;
+    border-left: 1px solid rgba(21, 78, 31, 0.15);
+}
+
+.nav-desktop .nav-socials a {
     color: var(--vert-fonce);
-    text-align: center;
-    font-size: 1.5rem;
-    margin-bottom: 0.2rem;
+    font-size: 1.05rem;
 }
 
-/* Indicateur de Défilement */
-.projets h2::after {
-    content: "\f337  Glissez pour voir plus";
-    font-weight: 900;
-    display: block;
+/* Navigation mobile (plein écran, hors du header pour éviter
+   qu'un ancêtre position:sticky ne piège le position:fixed) */
+.nav-mobile {
+    position: fixed;
+    inset: 0;
+    z-index: 105;
+    background: var(--vert-fonce);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    transform: translateX(100%);
+    transition: transform 0.35s ease;
+}
+
+.nav-mobile a {
+    text-decoration: none;
+    color: var(--blanc);
+    font-weight: 500;
+    font-size: 1.25rem;
+}
+
+.nav-mobile a:hover {
+    color: #b7e07a;
+}
+
+.nav-mobile .nav-socials {
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    padding-top: 1.4rem;
+}
+
+.nav-mobile .nav-socials a {
+    color: var(--blanc);
+    font-size: 1.4rem;
+}
+
+.nav-mobile .nav-cta {
+    margin-top: 0.5rem;
+}
+
+.nav-toggle:checked ~ .nav-mobile {
+    transform: translateX(0);
+}
+
+body:has(.nav-toggle:checked) {
+    overflow: hidden;
+}
+
+body:has(.nav-toggle:checked) .nav-burger span {
+    opacity: 0;
+}
+
+body:has(.nav-toggle:checked) .nav-burger::before {
+    top: 10px;
+    transform: rotate(45deg);
+}
+
+body:has(.nav-toggle:checked) .nav-burger::after {
+    top: 10px;
+    transform: rotate(-45deg);
+}
+
+.nav-socials {
+    display: flex;
+    gap: 1rem;
+    transition: color var(--transition), transform var(--transition);
+}
+
+.nav-socials a {
+    transition: color var(--transition), transform var(--transition);
+}
+
+.nav-socials a:hover {
+    transform: translateY(-2px);
+}
+
+.nav-cta {
+    padding: 0.6rem 1.3rem;
     font-size: 0.9rem;
-    color: #7f8c8d;
-    margin-top: 0.4rem;
-    margin-bottom: 1.5rem;
 }
 
-/* Carrousel */
-.projets > div {
+/* ==========================================================================
+   Hero
+   ========================================================================== */
+.hero {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    min-height: 78vh;
+    overflow: hidden;
+}
+
+.hero #photo,
+.hero #photosmall,
+.hero #photolarge {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+}
+
+.hero #photosmall,
+.hero #photolarge {
+    display: none;
+}
+
+.hero-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(180deg, rgba(15, 40, 20, 0.55) 0%, rgba(15, 40, 20, 0.65) 55%, rgba(10, 30, 15, 0.88) 100%);
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+    color: var(--blanc);
+    max-width: 780px;
+    padding: 3rem 1.5rem 3.5rem;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.hero-kicker {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #b7e07a;
+    margin-bottom: 1rem;
+}
+
+.hero-content h1 {
+    color: var(--blanc);
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1.1rem;
+}
+
+.hero-text {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.92);
+    margin-bottom: 1.8rem;
+}
+
+.hero-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+    align-items: stretch;
+}
+
+/* ==========================================================================
+   Highlights
+   ========================================================================== */
+.highlights {
+    max-width: 1300px;
+    margin: -2.5rem auto 0;
+    position: relative;
+    z-index: 3;
+    background: var(--blanc);
+    border-radius: var(--rayon-lg);
+    box-shadow: var(--ombre-forte);
+    padding: 1.6rem 1.2rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.4rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.highlight {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.highlight i {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--vert-pale);
+    color: var(--vert-clair);
+    font-size: 1.15rem;
+}
+
+.highlight h3 {
+    font-size: 1rem;
+    margin-bottom: 0.1rem;
+}
+
+.highlight p {
+    font-size: 0.85rem;
+    color: var(--texte-doux);
+}
+
+/* ==========================================================================
+   Sections communes
+   ========================================================================== */
+main {
+    max-width: 1300px;
+    margin: 0 auto;
+    padding: 0 1.25rem;
+}
+
+section {
+    padding: 4.5rem 0 1rem;
+}
+
+.section-kicker {
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--vert-clair);
+    margin-bottom: 0.6rem;
+}
+
+.section-title {
+    text-align: center;
+    font-size: 1.7rem;
+    font-weight: 700;
+    margin-bottom: 0.8rem;
+}
+
+.section-subtitle {
+    text-align: center;
+    max-width: 640px;
+    margin: 0 auto 2.5rem;
+    color: var(--texte-doux);
+    font-size: 0.98rem;
+}
+
+/* ==========================================================================
+   Services
+   ========================================================================== */
+.services-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.4rem;
+    padding-bottom: 1rem;
+}
+
+.service-card {
+    background: var(--blanc);
+    border-radius: var(--rayon);
+    padding: 2rem 1.6rem;
+    text-align: center;
+    box-shadow: var(--ombre);
+    transition: transform var(--transition), box-shadow var(--transition);
+    border: 1px solid rgba(21, 78, 31, 0.06);
+}
+
+.service-card:hover {
+    transform: translateY(-6px);
+    box-shadow: var(--ombre-forte);
+}
+
+.service-icon {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 1.2rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--vert-clair), var(--vert-fonce-2));
+    color: var(--blanc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+}
+
+.service-card h3 {
+    font-size: 1.05rem;
+    margin-bottom: 0.6rem;
+}
+
+.service-card p {
+    font-size: 0.9rem;
+    color: var(--texte-doux);
+}
+
+/* ==========================================================================
+   Réalisations / Galerie
+   ========================================================================== */
+.scroll-hint {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.gallery {
     display: flex;
     flex-direction: row;
     gap: 1rem;
@@ -149,65 +518,191 @@ hr {
     scroll-snap-type: x mandatory;
     padding-bottom: 1.5rem;
     scrollbar-width: thin;
-    scrollbar-color: var(--vert-clair) rgba(0,0,0,0.05);
+    scrollbar-color: var(--vert-clair) rgba(0, 0, 0, 0.05);
 }
 
-/* Scrollbar Personnalisée */
-.projets > div::-webkit-scrollbar {
+.gallery::-webkit-scrollbar {
     height: 6px;
-    display: block;
 }
 
-.projets > div::-webkit-scrollbar-track {
-    background: rgba(0,0,0,0.05);
+.gallery::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
     border-radius: 10px;
 }
 
-.projets > div::-webkit-scrollbar-thumb {
+.gallery::-webkit-scrollbar-thumb {
     background: var(--vert-clair);
     border-radius: 10px;
 }
 
-/* Cartes Projets */
-.projets > div > div {
-    flex: 0 0 100%;
+.gallery > div {
+    flex: 0 0 85%;
     scroll-snap-align: center;
     background-color: var(--blanc);
-    border-radius: 8px;
+    border-radius: var(--rayon);
     overflow: hidden;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    box-shadow: var(--ombre);
 }
 
-.projets img {
+.gallery img {
     width: 100%;
-    height: 220px;
+    height: 240px;
     object-fit: cover;
     display: block;
+    transition: transform 0.5s ease;
+}
+
+/* ==========================================================================
+   Bande CTA
+   ========================================================================== */
+.cta-band {
+    margin: 3rem -1.25rem 0;
+    padding: 3.5rem 1.5rem;
+    background: linear-gradient(135deg, var(--vert-fonce), var(--vert-fonce-2));
+    color: var(--blanc);
+    text-align: center;
+    border-radius: 0;
+}
+
+.cta-band h2 {
+    color: var(--blanc);
+    font-size: 1.5rem;
+    margin-bottom: 0.8rem;
+}
+
+.cta-band p {
+    color: rgba(255, 255, 255, 0.88);
+    max-width: 520px;
+    margin: 0 auto 1.6rem;
+    font-size: 0.95rem;
+}
+
+/* ==========================================================================
+   Contact
+   ========================================================================== */
+.contact-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.4rem;
+}
+
+.contact-cards {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+.contact-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--blanc);
+    border-radius: var(--rayon);
+    padding: 1.3rem 1.4rem;
+    box-shadow: var(--ombre);
+    text-decoration: none;
+    transition: transform var(--transition), box-shadow var(--transition);
+}
+
+a.contact-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--ombre-forte);
+}
+
+.contact-card i {
+    flex-shrink: 0;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background: var(--vert-pale);
+    color: var(--vert-clair);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+}
+
+.contact-card h3 {
+    font-size: 0.95rem;
+    margin-bottom: 0.2rem;
+}
+
+.contact-card p {
+    font-size: 0.88rem;
+    color: var(--texte-doux);
+}
+
+.contact-map {
+    border-radius: var(--rayon);
+    overflow: hidden;
+    box-shadow: var(--ombre);
+    min-height: 260px;
+}
+
+.contact-map iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 260px;
+    border: 0;
+    display: block;
 }
 
-.projets p {
-    padding: 1rem;
-    text-align: center;
-    font-size: 0.95rem;
-}
-
-/* Footer */
+/* ==========================================================================
+   Footer
+   ========================================================================== */
 footer {
-    background-color: rgb(78 125 19 / 0.88);
+    background: var(--vert-fonce);
     color: var(--blanc);
-    text-align: center;
-    padding: 2rem 1rem;
-    margin-top: 2rem;
-    font-size: 0.95rem;
+    margin-top: 4rem;
+    padding: 3rem 1.25rem 1.5rem;
+}
+
+.footer-top {
+    max-width: 1300px;
+    margin: 0 auto 2.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.2rem;
+    text-align: center;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.footer-top .brand {
+    color: var(--blanc);
+}
+
+.footer-top .brand strong {
+    color: #b7e07a;
+}
+
+.footer-socials {
+    display: flex;
+    gap: 1.4rem;
+}
+
+.footer-socials a {
+    color: var(--blanc);
+    font-size: 1.3rem;
+    text-decoration: none;
+    transition: color var(--transition), transform var(--transition);
+}
+
+.footer-socials a:hover {
+    color: #b7e07a;
+    transform: scale(1.1);
 }
 
-/* Footer Layout */
 .footer-sections {
+    max-width: 1300px;
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
     margin-bottom: 1rem;
+    text-align: center;
 }
 
 .footer-block {
@@ -215,7 +710,8 @@ footer {
 }
 
 .footer-block h3 {
-    font-size: 1.2rem;
+    color: var(--blanc);
+    font-size: 1.05rem;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -227,150 +723,264 @@ footer {
     justify-content: center;
     gap: 10px;
     margin-bottom: 0.8rem;
+    font-size: 0.92rem;
     word-break: break-word;
 }
 
+.footer-block p a {
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.85);
+    transition: color var(--transition);
+}
+
+.footer-block p a:hover {
+    color: #b7e07a;
+}
+
 .footer-block i {
     width: 20px;
     text-align: center;
 }
 
-/* Media Queries */
+.footer-bottom {
+    max-width: 1300px;
+    margin: 0 auto;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    gap: 1rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.75);
+    text-align: center;
+}
+
+.back-to-top {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--blanc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    transition: background var(--transition), transform var(--transition);
+}
+
+.back-to-top:hover {
+    background: var(--vert-clair);
+    transform: translateY(-3px);
+}
+
+/* ==========================================================================
+   Media Queries — Tablette (768px+)
+   ========================================================================== */
 @media (min-width: 768px) {
-    #photo {
-        height: 350px;
-        margin-bottom: 2rem;
+    .hero-content h1 {
+        font-size: 2.6rem;
     }
 
-    .banner p {
-        font-size: 20px;
+    .hero-text {
+        font-size: 1.1rem;
     }
 
-    .projets h2::after {
+    .hero-actions {
+        flex-direction: row;
+        justify-content: center;
+    }
+
+    .highlights {
+        grid-template-columns: repeat(4, 1fr);
+        padding: 2rem 2.2rem;
+    }
+
+    .highlight {
+        flex-direction: column;
+        text-align: center;
+        gap: 0.7rem;
+    }
+
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .services-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .gallery > div {
+        flex: 0 0 auto;
+        width: calc(50% - 0.5rem);
+    }
+
+    .contact-cards {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .footer-top {
+        flex-direction: row;
+        justify-content: space-between;
+        text-align: left;
+    }
+
+    .footer-sections {
+        flex-direction: row;
+        justify-content: space-between;
+        text-align: left;
+    }
+
+    .footer-block p {
+        justify-content: flex-start;
+    }
+
+    .footer-bottom {
+        flex-direction: row;
+        justify-content: space-between;
+        text-align: left;
+    }
+}
+
+/* ==========================================================================
+   Media Queries — Desktop (1024px+)
+   ========================================================================== */
+@media (min-width: 1024px) {
+    .header-inner {
+        padding: 0.9rem 2rem;
+    }
+
+    .nav-desktop {
+        display: flex;
+    }
+
+    .nav-burger {
         display: none;
     }
 
-    .projets > div {
+    .hero {
+        min-height: 88vh;
+        align-items: center;
+    }
+
+    .hero #photo {
+        display: none;
+    }
+
+    .hero #photosmall {
+        display: block;
+    }
+
+    .hero-overlay {
+        background: linear-gradient(90deg, rgba(10, 30, 15, 0.92) 0%, rgba(10, 30, 15, 0.6) 55%, rgba(10, 30, 15, 0.2) 100%);
+    }
+
+    .hero-content {
+        max-width: 1300px;
+        text-align: left;
+        margin: 0;
+        padding: 0 3rem;
+    }
+
+    .hero-content h1 {
+        font-size: 3.2rem;
+        max-width: 640px;
+    }
+
+    .hero-text {
+        max-width: 560px;
+    }
+
+    .hero-actions {
+        justify-content: flex-start;
+    }
+
+    .highlights {
+        margin-left: auto;
+        margin-right: auto;
+        padding: 2rem 3rem;
+    }
+
+    .services-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .gallery {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 1.5rem;
         overflow-x: visible;
         scroll-snap-type: none;
         padding-bottom: 0;
     }
 
-    .projets > div > div {
-        flex: auto;
+    .gallery > div {
+        width: 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: center;
+    .gallery img {
+        height: 260px;
     }
 
-    .footer-block p {
-        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 photo classique */
-    #photo {
-        display: none;
-    }
-
-    /* On affiche l'image "small" */
-    #photosmall {
-        display: block;
-        width: 55vw;
-        height: 450px;
-        margin: 0;
-        object-fit: cover;
-        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
-        mask-image: linear-gradient(to right, transparent 0%, black 25%);
-    }
-
-    /* Ajustement des images de la galerie avec zoom */
-    .projets img {
-        height: 320px;
-        transition: transform 0.4s ease;
-    }
-
-    .projets > div > div:hover img {
+    .gallery > div:hover img {
         transform: scale(1.08);
     }
-}
 
-@media (min-width: 1440px) {
-    /* On autorise le contenu à s'élargir davantage */
-    main {
-        max-width: 1400px;
+    .cta-band {
+        margin-left: 0;
+        margin-right: 0;
+        border-radius: var(--rayon-lg);
+        padding: 4rem 3rem;
     }
 
-    /* On masque l'image "small" pour laisser place à la "large" */
-    #photosmall {
+    .contact-grid {
+        grid-template-columns: 1.1fr 1fr;
+        align-items: stretch;
+    }
+
+    .contact-map {
+        min-height: 100%;
+    }
+
+    .contact-map iframe {
+        min-height: 100%;
+    }
+}
+
+/* ==========================================================================
+   Media Queries — Grand écran (1440px+)
+   ========================================================================== */
+@media (min-width: 1440px) {
+    main {
+        max-width: 1440px;
+    }
+
+    .highlights,
+    .cta-band {
+        max-width: 1440px;
+    }
+
+    .hero #photosmall {
         display: none;
     }
 
-    /* On affiche l'image "large" avec les mêmes effets que la "small" */
-    #photolarge {
+    .hero #photolarge {
         display: block;
-        width: 55vw;
-        height: 450px;
-        margin: 0;
-        object-fit: cover;
-        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
-        mask-image: linear-gradient(to right, transparent 0%, black 25%);
     }
 
-    /* On aère la grille des projets */
-    .projets > div {
-        gap: 2.5rem;
+    .hero-content h1 {
+        font-size: 3.6rem;
     }
 
-    /* On agrandit considérablement les photos */
-    .projets img {
-        height: 400px;
+    .gallery img {
+        height: 300px;
     }
-
-    .banner p {
-        font-size: 25px;
-    }
-
-@media (min-width: 1740px) {
-
-    .banner p {
-        font-size: 28px;
-    }
-
 }
 
-}
\ No newline at end of file
+/* ==========================================================================
+   Menu mobile (< 1024px) — le burger s'affiche, le nav desktop reste caché
+   ========================================================================== */
+@media (max-width: 1023px) {
+    .nav-burger {
+        display: block;
+    }
+}
diff --git a/index.html b/index.html
index 8a30ea0..93ee784 100644
--- a/index.html
+++ b/index.html
@@ -3,70 +3,230 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FERNANDO PAYSAGISTE</title>
+    <title>Fernando Paysagiste — Création & entretien de jardins à Nancy</title>
+    <meta name="description" content="Fernando Paysagiste, artisan indépendant à Nancy : tonte, taille de haies, création et entretien d'espaces verts. Devis gratuit et sans engagement.">
+    <meta name="theme-color" content="#154e1f">
+
+    <link rel="icon" href="assets/images/logo.png" type="image/png">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <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>
+<header class="site-header">
+    <div class="header-inner">
+        <a href="#accueil" class="brand">
+            <img src="assets/images/logo.png" alt="Logo Fernando Paysagiste" id="logo">
+            <span>Fernando <strong>Paysagiste</strong></span>
+        </a>
+
+        <nav class="nav-desktop">
+            <a href="#accueil">Accueil</a>
+            <a href="#services">Services</a>
+            <a href="#realisations">Réalisations</a>
+            <a href="#contact">Contact</a>
+
+            <div class="nav-socials">
+                <a href="https://www.instagram.com/fernando.paysagiste/" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
+                <a href="https://www.youtube.com/@Fernando-i6k3i" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
+                <a href="https://www.tiktok.com/@fernandoklein505" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
+                <a href="https://www.linkedin.com/in/fernando-klein-72540a419/" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
+            </div>
+
+            <a href="#contact" class="btn btn-primary nav-cta">Devis gratuit</a>
+        </nav>
+
+        <label for="nav-toggle" class="nav-burger" aria-label="Ouvrir le menu">
+            <span></span>
+        </label>
+    </div>
 </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>
+<input type="checkbox" id="nav-toggle" class="nav-toggle">
+<nav class="nav-mobile">
+    <a href="#accueil">Accueil</a>
+    <a href="#services">Services</a>
+    <a href="#realisations">Réalisations</a>
+    <a href="#contact">Contact</a>
+
+    <div class="nav-socials">
+        <a href="https://www.instagram.com/fernando.paysagiste/" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
+        <a href="https://www.youtube.com/@Fernando-i6k3i" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
+        <a href="https://www.tiktok.com/@fernandoklein505" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
+        <a href="https://www.linkedin.com/in/fernando-klein-72540a419/" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
+    </div>
+
+    <a href="#contact" class="btn btn-primary nav-cta">Devis gratuit</a>
+</nav>
 
 <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">
-        <img src="assets/images/photo_6_large.png" alt="photo" id="photolarge">
-        <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="hero" id="accueil">
+        <img src="assets/images/photo_6.png" alt="Fernando en intervention de taille d'arbre" id="photo">
+        <img src="assets/images/photo_6_small.png" alt="Fernando en intervention de taille d'arbre" id="photosmall">
+        <img src="assets/images/photo_6_large.png" alt="Fernando en intervention de taille d'arbre" id="photolarge">
+        <div class="hero-overlay"></div>
 
-    <section class="projets">
-        <h2>Mes Travaux</h2>
-        <div>
-            <div>
-                <img src="assets/images/photo_1.jpg" alt="photo" id="photo1">
+        <div class="hero-content">
+            <p class="hero-kicker">Artisan paysagiste — Nancy & environs</p>
+            <h1>Un extérieur qui vous ressemble, entretenu avec passion</h1>
+            <p class="hero-text">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.</p>
+            <div class="hero-actions">
+                <a href="#contact" class="btn btn-primary">Demander un devis gratuit</a>
+                <a href="tel:0763027356" class="btn btn-outline"><i class="fa-solid fa-phone"></i> 07 63 02 73 56</a>
             </div>
+        </div>
+    </section>
+
+    <section class="highlights">
+        <div class="highlight">
+            <i class="fa-solid fa-file-invoice"></i>
             <div>
-                <img src="assets/images/photo_2.jpg" alt="photo" id="photo2">
+                <h3>Devis gratuit</h3>
+                <p>Sans engagement</p>
             </div>
+        </div>
+        <div class="highlight">
+            <i class="fa-solid fa-clock"></i>
             <div>
-                <img src="assets/images/photo_3.png" alt="photo" id="photo3">
+                <h3>Disponible 6j/7</h3>
+                <p>Lun–Ven 8h–20h, Sam matin</p>
             </div>
+        </div>
+        <div class="highlight">
+            <i class="fa-solid fa-seedling"></i>
             <div>
-                <img src="assets/images/photo_4.jpg" alt="photo" id="photo4">
+                <h3>Travail soigné</h3>
+                <p>Précision & minutie</p>
             </div>
+        </div>
+        <div class="highlight">
+            <i class="fa-solid fa-location-dot"></i>
             <div>
-                <img src="assets/images/photo_5.jpg" alt="photo" id="photo5">
+                <h3>Proximité</h3>
+                <p>Nancy et alentours</p>
             </div>
-            <div>
-                <img src="assets/images/photo_7.png" alt="photo" id="photo7">
+        </div>
+    </section>
+
+    <section class="services" id="services">
+        <p class="section-kicker">Mes prestations</p>
+        <h2 class="section-title">Des services complets pour votre jardin</h2>
+        <p class="section-subtitle">Un accompagnement sur-mesure, de l'entretien courant à la création d'espaces verts entièrement pensés pour vous.</p>
+
+        <div class="services-grid">
+            <article class="service-card">
+                <div class="service-icon"><i class="fa-solid fa-scissors"></i></div>
+                <h3>Tonte & entretien</h3>
+                <p>Entretien régulier de vos pelouses pour un jardin toujours net et soigné.</p>
+            </article>
+            <article class="service-card">
+                <div class="service-icon"><i class="fa-solid fa-tree"></i></div>
+                <h3>Taille de haies & d'arbres</h3>
+                <p>Taille en hauteur sécurisée, mise en forme des haies et élagage soigné.</p>
+            </article>
+            <article class="service-card">
+                <div class="service-icon"><i class="fa-solid fa-leaf"></i></div>
+                <h3>Création de jardins</h3>
+                <p>Conception et aménagement complet d'espaces verts adaptés à vos envies.</p>
+            </article>
+            <article class="service-card">
+                <div class="service-icon"><i class="fa-solid fa-broom"></i></div>
+                <h3>Débroussaillage & nettoyage</h3>
+                <p>Remise en état de terrains négligés ou envahis par la végétation.</p>
+            </article>
+        </div>
+    </section>
+
+    <section class="projets" id="realisations">
+        <p class="section-kicker">Portfolio</p>
+        <h2 class="section-title">Mes réalisations</h2>
+        <p class="section-subtitle scroll-hint"><i class="fa-solid fa-arrows-left-right"></i> Glissez pour voir plus</p>
+
+        <div class="gallery">
+            <div><img src="assets/images/photo_1.jpg" alt="Taille d'arbre en hauteur avec équipement de sécurité" loading="lazy"></div>
+            <div><img src="assets/images/photo_2.jpg" alt="Allée de pelouse fraîchement tondue entre deux haies" loading="lazy"></div>
+            <div><img src="assets/images/photo_3.png" alt="Jardin entretenu avec pelouse tondue et arbres" loading="lazy"></div>
+            <div><img src="assets/images/photo_4.jpg" alt="Aménagement d'espace vert" loading="lazy"></div>
+            <div><img src="assets/images/photo_5.jpg" alt="Entretien de jardin résidentiel" loading="lazy"></div>
+            <div><img src="assets/images/photo_7.png" alt="Réalisation d'aménagement paysager" loading="lazy"></div>
+            <div><img src="assets/images/photo_8.png" alt="Espace vert entretenu par Fernando Paysagiste" loading="lazy"></div>
+            <div><img src="assets/images/photo_9.png" alt="Pelouse tondue avec arbre et haies taillées" loading="lazy"></div>
+            <div><img src="assets/images/photo_10.png" alt="Jardin paysager après intervention" loading="lazy"></div>
+        </div>
+    </section>
+
+    <section class="cta-band">
+        <h2>Un projet de jardin en tête ?</h2>
+        <p>Contactez-moi pour un devis gratuit et sans engagement, adapté à votre budget et à vos envies.</p>
+        <a href="#contact" class="btn btn-light">Me contacter</a>
+    </section>
+
+    <section class="contact" id="contact">
+        <p class="section-kicker">Contact</p>
+        <h2 class="section-title">Parlons de votre projet</h2>
+        <p class="section-subtitle">Un appel, un message, et je reviens vers vous rapidement pour organiser une visite ou établir un devis.</p>
+
+        <div class="contact-grid">
+            <div class="contact-cards">
+                <a class="contact-card" href="tel:0763027356">
+                    <i class="fa-solid fa-phone"></i>
+                    <div>
+                        <h3>Téléphone</h3>
+                        <p>07 63 02 73 56</p>
+                    </div>
+                </a>
+                <a class="contact-card" href="mailto:fernando.paysagiste@gmail.com">
+                    <i class="fa-solid fa-envelope"></i>
+                    <div>
+                        <h3>Email</h3>
+                        <p>fernando.paysagiste@gmail.com</p>
+                    </div>
+                </a>
+                <div class="contact-card">
+                    <i class="fa-solid fa-location-dot"></i>
+                    <div>
+                        <h3>Secteur d'intervention</h3>
+                        <p>Nancy et environs</p>
+                    </div>
+                </div>
+                <div class="contact-card">
+                    <i class="fa-solid fa-clock"></i>
+                    <div>
+                        <h3>Disponibilité</h3>
+                        <p>Lundi au Vendredi : 8h à 20h<br>Samedi : matinée uniquement</p>
+                    </div>
+                </div>
             </div>
-            <div>
-                <img src="assets/images/photo_8.png" alt="photo" id="photo8">
-            </div>
-            <div>
-                <img src="assets/images/photo_9.png" alt="photo" id="photo9">
-            </div>
-            <div>
-                <img src="assets/images/photo_10.png" alt="photo" id="photo10">
+
+            <div class="contact-map">
+                <iframe
+                    title="Zone d'intervention à Nancy"
+                    src="https://www.openstreetmap.org/export/embed.html?bbox=6.1244%2C48.6521%2C6.2444%2C48.7321&layer=mapnik&marker=48.6921%2C6.1844"
+                    loading="lazy"></iframe>
             </div>
         </div>
     </section>
 </main>
 
 <footer>
+    <div class="footer-top">
+        <a href="#accueil" class="brand">
+            <img src="assets/images/logo.png" alt="Logo Fernando Paysagiste">
+            <span>Fernando <strong>Paysagiste</strong></span>
+        </a>
+        <div class="footer-socials">
+            <a href="https://www.instagram.com/fernando.paysagiste/" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
+            <a href="https://www.youtube.com/@Fernando-i6k3i" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
+            <a href="https://www.tiktok.com/@fernandoklein505" aria-label="TikTok"><i class="fa-brands fa-tiktok"></i></a>
+            <a href="https://www.linkedin.com/in/fernando-klein-72540a419/" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
+        </div>
+    </div>
+
     <div class="footer-sections">
         <div class="footer-block">
             <h3>Disponibilité</h3>
@@ -76,15 +236,24 @@
 
         <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-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 class="footer-block">
+            <h3>Navigation</h3>
+            <p><a href="#services">Services</a></p>
+            <p><a href="#realisations">Réalisations</a></p>
+            <p><a href="#contact">Contact</a></p>
+        </div>
     </div>
 
-    <br>
-    <p>&copy; 2026 FERNANDO PAYSAGISTE. Tous droits réservés.</p>
+    <div class="footer-bottom">
+        <p>&copy; 2026 FERNANDO PAYSAGISTE. Tous droits réservés.</p>
+        <a href="#accueil" class="back-to-top" aria-label="Retour en haut"><i class="fa-solid fa-arrow-up"></i></a>
+    </div>
 </footer>
 
 </body>
-</html>
\ No newline at end of file
+</html>