diff --git a/src/components/layout/footer/footer.tsx b/src/components/layout/footer/footer.tsx
index 0f50e2e28..f17d062f2 100644
--- a/src/components/layout/footer/footer.tsx
+++ b/src/components/layout/footer/footer.tsx
@@ -3,6 +3,10 @@ import { OnRuntimeWordMark } from "@/logos/components";
 import Link from "next/link";
 import React from "react";
 
+/**
+ * Configuration de la navigation du footer
+ * Organisée par catégories pour une meilleure maintenabilité
+ */
 const navigation = {
   Navigation: [
     { name: "Nos services", href: Routes.services },
@@ -11,15 +15,15 @@ const navigation = {
     { name: "Carrières", href: Routes.unknown },
     { name: "Blog", href: Routes.unknown },
   ],
-  ["Ressources"]: [
+  Ressources: [
     { name: "Glossaire", href: Routes.glossary },
     { name: "Communauté", href: Routes.unknown },
     { name: "Status", href: Routes.unknown },
   ],
-  ["Autres"]: [
+  Autres: [
     { name: "Contact", href: Routes.contact },
     { name: "Conditions générales", href: Routes.legals.terms },
-    { name: "Politique de confidentialité", href: Routes.legals.privacy }, 
+    { name: "Politique de confidentialité", href: Routes.legals.privacy },
     { name: "Détails de l'entreprise", href: Routes.legals.company },
   ],
   ["Réseaux sociaux"]: [
@@ -31,16 +35,73 @@ const navigation = {
   ],
 };
 
+/**
+ * Composant StatusIndicator - Indicateur visuel de statut
+ */
+const StatusIndicator = () => (
+  <svg
+    width="14"
+    height="15"
+    viewBox="0 0 14 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 10.9746C8.65685 10.9746 10 9.63146 10 7.97461C10 6.31776 8.65685 4.97461 7 4.97461C5.34315 4.97461 4 6.31776 4 7.97461C4 9.63146 5.34315 10.9746 7 10.9746Z"
+      fill="#2294FF"
+    />
+    <path
+      d="M7 11.9746C9.20914 11.9746 11 10.1837 11 7.97461C11 5.76547 9.20914 3.97461 7 3.97461C4.79086 3.97461 3 5.76547 3 7.97461C3 10.1837 4.79086 11.9746 7 11.9746Z"
+      stroke="#2294FF"
+      strokeOpacity="0.15"
+      strokeWidth="4"
+    />
+  </svg>
+);
+
+/**
+ * Composant NavigationSection - Affiche une section de navigation
+ */
+const NavigationSection = ({
+  title,
+  links,
+}: {
+  title: string;
+  links: { name: string; href: string }[];
+}) => (
+  <div className="flex flex-col gap-4">
+    <h4 className="text-muted-foreground">{title}</h4>
+    <ul className="flex flex-col gap-3">
+      {links.map((link) => (
+        <li key={link.name}>
+          <Link
+            href={link.href}
+            className="text-foreground"
+            target={link.href.startsWith("http") ? "_blank" : undefined}
+            rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
+          >
+            {link.name}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+/**
+ * Composant Footer - Pied de page principal
+ */
 const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className={"pb-24 pt-10 md:pt-20 border-t w-full border-border"}>
-      <div className={"px-4 md:px-0 max-w-5xl text-xs md:text-sm mx-auto"}>
+    <footer className="pb-24 pt-10 md:pt-20 border-t w-full border-border">
+      <div className="px-4 md:px-0 max-w-5xl text-xs md:text-sm mx-auto">
+        {/* Section principale du footer */}
         <div className="flex flex-col md:flex-row justify-between md:items-start gap-8">
+          {/* Section branding et description */}
           <div className="flex flex-col items-start gap-5">
             <OnRuntimeWordMark height={24} className="h-6" />
-
             <p>
               Un studio de créatif, à travers le monde.
               <br />
@@ -50,49 +111,22 @@ const Footer: React.FC = () => {
             </p>
           </div>
 
+          {/* Sections de navigation */}
           <div className="flex flex-wrap gap-8">
-            {Object.entries(navigation).map(([key, links]) => (
-              <div key={key} className="flex flex-col gap-4">
-                <h4 className="text-muted-foreground">{key}</h4>
-
-                <ul className="flex flex-col gap-3">
-                  {links.map((link) => (
-                    <li key={link.name}>
-                      <Link href={link.href} className="text-foreground" target={link.href.startsWith("http") ? "_blank" : ""} rel={link.href.startsWith("http") ? "noopener noreferrer" : ""}>
-                        {link.name}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
+            {Object.entries(navigation).map(([title, links]) => (
+              <NavigationSection key={title} title={title} links={links} />
             ))}
           </div>
         </div>
 
+        {/* Séparateur */}
         <div className="h-px bg-border w-full my-8" />
 
+        {/* Section inférieure (copyright et statut) */}
         <div className="flex flex-col-reverse md:flex-row justify-between items-center gap-2">
           <p>{`© onRuntime Studio, ${currentYear}`}</p>
-
-          <p className="inline-flex gap-2">
-            <svg
-              width="14"
-              height="15"
-              viewBox="0 0 14 15"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7 10.9746C8.65685 10.9746 10 9.63146 10 7.97461C10 6.31776 8.65685 4.97461 7 4.97461C5.34315 4.97461 4 6.31776 4 7.97461C4 9.63146 5.34315 10.9746 7 10.9746Z"
-                fill="#2294FF"
-              />
-              <path
-                d="M7 11.9746C9.20914 11.9746 11 10.1837 11 7.97461C11 5.76547 9.20914 3.97461 7 3.97461C4.79086 3.97461 3 5.76547 3 7.97461C3 10.1837 4.79086 11.9746 7 11.9746Z"
-                stroke="#2294FF"
-                strokeOpacity="0.15"
-                strokeWidth="4"
-              />
-            </svg>
+          <p className="inline-flex gap-2 items-center">
+            <StatusIndicator />
             Tous les services sont opérationnels
           </p>
         </div>
@@ -101,4 +135,4 @@ const Footer: React.FC = () => {
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/src/components/marketing/navbar/index.tsx b/src/components/marketing/navbar/index.tsx
index 2a1477a05..10711c83e 100644
--- a/src/components/marketing/navbar/index.tsx
+++ b/src/components/marketing/navbar/index.tsx
@@ -7,230 +7,255 @@ import Projects from "@/constants/projects";
 import { getMajorAgencies } from "@/constants/agencies";
 import { OnRuntimeWordMark } from "@/logos/components";
 import Link from "next/link";
-import type React from "react";
 import { useState, useRef, useEffect } from "react";
 import Navigation from "./navigation";
 import { ChevronDown, Menu } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+// Types pour les éléments de navigation
 interface SubNavItem {
-	title: string;
-	path: string;
+  title: string;
+  path: string;
 }
 
 interface DropdownItem {
-	title: string;
-	path: string;
-	items?: SubNavItem[];
+  title: string;
+  path: string;
+  items?: SubNavItem[];
 }
 
 interface NavItem {
-	title: string;
-	path: string;
-	dropdown?: DropdownItem[];
+  title: string;
+  path: string;
+  dropdown?: DropdownItem[];
 }
 
-const Navbar: React.FC = () => {
-	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-	const [expandedSection, setExpandedSection] = useState<string | null>(null);
-
-	const navRef = useRef<HTMLDivElement>(null);
-
-	const [navWidth, setNavWidth] = useState<number | undefined>(undefined);
-
-	const majorAgencies = getMajorAgencies(5);
-
-	const navItems: NavItem[] = [
-		{
-			title: "Nos services",
-			path: Routes.services,
-			dropdown: Services.map((service) => ({
-				title: service.name,
-				path: Routes.service[service.id].root,
-				items: service.subServices.map((subService) => ({
-					title: subService.name,
-					path: subService.route,
-				})),
-			})),
-		},
-		{
-			title: "Nos projets",
-			path: Routes.unknown,
-			dropdown: Projects.slice(0, 5).map((project) => ({
-				title: project.name,
-				path: Routes.project(project.id),
-			})),
-		},
-		{
-			title: "Nos agences",
-			path: Routes.agency.root,
-			dropdown: [
-				{
-					title: "Toutes nos agences",
-					path: Routes.agency.root,
-				},
-				...majorAgencies.map((agency) => ({
-					title: `Agence ${agency.name}`,
-					path: Routes.agency.city(agency.id),
-				})),
-			],
-		},
-		{
-			title: "L'association",
-			path: Routes.npo,
-		},
-	];
-
-	useEffect(() => {
-		if (!navRef.current) return;
-
-		const resizeObserver = new ResizeObserver((entries) => {
-			for (const entry of entries) {
-				const { width } = entry.contentRect;
-				setNavWidth(width);
-			}
-		});
-
-		resizeObserver.observe(navRef.current);
-
-		return () => {
-			resizeObserver.disconnect();
-		};
-	}, []);
-
-	useEffect(() => {
-		if (navWidth && navWidth >= 768 && mobileMenuOpen) {
-			setMobileMenuOpen(false);
-			setExpandedSection(null);
-		}
-	}, [navWidth, mobileMenuOpen]);
-
-	const toggleMobileMenu = () => {
-		setMobileMenuOpen(!mobileMenuOpen);
-		setExpandedSection(null);
-	};
-
-	const toggleSection = (section: string) => {
-		setExpandedSection(expandedSection === section ? null : section);
-	};
-
-	const closeMenu = () => {
-		setMobileMenuOpen(false);
-		setExpandedSection(null);
-	};
-
-	return (
-		<nav
-			className="px-4 z-50 fixed w-full max-w-5xl left-1/2 -translate-x-1/2 mt-4"
-			ref={navRef}
-		>
-			<div
-				className={
-					"flex flex-col bg-background/50 rounded-lg shadow-xs backdrop-blur-2xl transition-all duration-300"
-				}
-			>
-				<div className="flex justify-between items-center p-2.5">
-					<Link href={Routes.landing.visitor} onClick={closeMenu}>
-						<OnRuntimeWordMark className="h-6" height={24} />
-					</Link>
-
-					<Navigation />
-
-					<div className="flex gap-2">
-						<Link href={Routes.contact}>
-							<Button className="hidden md:inline-flex" variant="outline">
-								Nous contacter
-							</Button>
-						</Link>
-
-						<Button
-							onClick={toggleMobileMenu}
-							className="inline-flex md:hidden"
-							variant="outline"
-							aria-expanded={mobileMenuOpen}
-							aria-label="Toggle menu"
-						>
-							<Menu className="h-5 w-5" />
-							<span className="sr-only">Menu</span>
-						</Button>
-					</div>
-				</div>
-
-				{mobileMenuOpen && (
-					<div className="px-3 flex flex-col space-y-4 md:hidden max-h-[calc(100vh-100px)] overflow-y-auto pb-4">
-						{navItems.map((item) => (
-							<div key={item.title} className="border-t border-border pt-3">
-								{item.dropdown ? (
-									<div className="space-y-3">
-										<button
-											onClick={() => toggleSection(item.title)}
-											className="flex w-full justify-between items-center text-base font-medium"
-											aria-expanded={expandedSection === item.title}
-										>
-											{item.title}
-											<ChevronDown
-												className={cn(
-													"h-4 w-4 transition-transform",
-													expandedSection === item.title ? "rotate-180" : "",
-												)}
-											/>
-										</button>
-
-										{expandedSection === item.title && (
-											<div className="pl-4 space-y-4 pt-2 overflow-y-auto">
-												{item.dropdown.map((dropdown) => (
-													<div key={dropdown.title} className="space-y-2 pb-3">
-														<Link
-															href={dropdown.path}
-															className="block text-sm font-medium"
-															onClick={closeMenu}
-														>
-															{dropdown.title}
-														</Link>
-
-														{dropdown.items && (
-															<div className="pl-3 space-y-2">
-																{dropdown.items.map((subItem) => (
-																	<Link
-																		key={subItem.title}
-																		href={subItem.path}
-																		className="block text-xs text-muted-foreground hover:text-foreground"
-																		onClick={closeMenu}
-																	>
-																		{subItem.title}
-																	</Link>
-																))}
-															</div>
-														)}
-													</div>
-												))}
-											</div>
-										)}
-									</div>
-								) : (
-									<Link
-										href={item.path}
-										className="block text-base font-medium"
-										onClick={closeMenu}
-									>
-										{item.title}
-									</Link>
-								)}
-							</div>
-						))}
-
-						<Link
-							href={Routes.contact}
-							className="block pt-4 pb-2"
-							onClick={closeMenu}
-						>
-							<Button className="w-full">Nous contacter</Button>
-						</Link>
-					</div>
-				)}
-			</div>
-		</nav>
-	);
+/**
+ * Composant pour un item du menu mobile avec sous-menus
+ */
+const MobileMenuItem = ({
+  item,
+  isExpanded,
+  onToggle,
+  onClose
+}: {
+  item: NavItem;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+}) => {
+  // Item simple sans dropdown
+  if (!item.dropdown) {
+    return (
+      <Link href={item.path} className="block text-base font-medium" onClick={onClose}>
+        {item.title}
+      </Link>
+    );
+  }
+
+  // Item avec dropdown
+  return (
+    <div className="space-y-3">
+      <button
+        onClick={onToggle}
+        className="flex w-full justify-between items-center text-base font-medium"
+        aria-expanded={isExpanded}
+      >
+        {item.title}
+        <ChevronDown className={cn("h-4 w-4 transition-transform", isExpanded ? "rotate-180" : "")} />
+      </button>
+
+      {isExpanded && (
+        <div className="pl-4 space-y-4 pt-2 overflow-y-auto">
+          {item.dropdown.map((dropdown) => (
+            <div key={dropdown.title} className="space-y-2 pb-3">
+              <Link href={dropdown.path} className="block text-sm font-medium" onClick={onClose}>
+                {dropdown.title}
+              </Link>
+
+              {dropdown.items?.map((subItem) => (
+                <Link
+                  key={subItem.title}
+                  href={subItem.path}
+                  className="block text-xs text-muted-foreground hover:text-foreground pl-3 pt-2"
+                  onClick={onClose}
+                >
+                  {subItem.title}
+                </Link>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Menu mobile complet
+ */
+const MobileMenu = ({
+  items,
+  expandedItem,
+  onItemToggle,
+  onClose
+}: {
+  items: NavItem[];
+  expandedItem: string | null;
+  onItemToggle: (title: string) => void;
+  onClose: () => void;
+}) => (
+  <div className="px-3 flex flex-col space-y-4 md:hidden max-h-[calc(100vh-100px)] overflow-y-auto pb-4">
+    {items.map((item) => (
+      <div key={item.title} className="border-t border-border pt-3">
+        <MobileMenuItem
+          item={item}
+          isExpanded={expandedItem === item.title}
+          onToggle={() => onItemToggle(item.title)}
+          onClose={onClose}
+        />
+      </div>
+    ))}
+
+    <Link href={Routes.contact} className="block pt-4 pb-2" onClick={onClose}>
+      <Button className="w-full">Nous contacter</Button>
+    </Link>
+  </div>
+);
+
+/**
+ * Barre de navigation principale
+ */
+const Navbar = () => {
+  // État pour le menu mobile et les sections développées
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [expandedItem, setExpandedItem] = useState<string | null>(null);
+  const navRef = useRef<HTMLDivElement>(null);
+  const [navWidth, setNavWidth] = useState<number>();
+
+  // Configuration des items de navigation
+  const navItems: NavItem[] = [
+    {
+      title: "Nos services",
+      path: Routes.services,
+      dropdown: Services.map((service) => ({
+        title: service.name,
+        path: Routes.service[service.id].root,
+        items: service.subServices.map((subService) => ({
+          title: subService.name,
+          path: subService.route,
+        })),
+      })),
+    },
+    {
+      title: "Nos projets",
+      path: Routes.unknown,
+      dropdown: Projects.slice(0, 5).map((project) => ({
+        title: project.name,
+        path: Routes.project(project.id),
+      })),
+    },
+    {
+      title: "Nos agences",
+      path: Routes.agency.root,
+      dropdown: [
+        {
+          title: "Toutes nos agences",
+          path: Routes.agency.root,
+        },
+        ...getMajorAgencies(5).map((agency) => ({
+          title: `Agence ${agency.name}`,
+          path: Routes.agency.city(agency.id),
+        })),
+      ],
+    },
+    {
+      title: "L'association",
+      path: Routes.npo,
+    },
+  ];
+
+  // Observateur de redimensionnement pour le responsive
+  useEffect(() => {
+    if (!navRef.current) return;
+    
+    const observer = new ResizeObserver(([entry]) => {
+      setNavWidth(entry.contentRect.width);
+    });
+    
+    observer.observe(navRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  // Fermeture du menu mobile en desktop
+  useEffect(() => {
+    if (navWidth && navWidth >= 768 && mobileMenuOpen) {
+      setMobileMenuOpen(false);
+      setExpandedItem(null);
+    }
+  }, [navWidth, mobileMenuOpen]);
+
+  // Gestionnaires d'événements
+  const toggleMobileMenu = () => {
+    setMobileMenuOpen(!mobileMenuOpen);
+    setExpandedItem(null);
+  };
+
+  const toggleItem = (title: string) => {
+    setExpandedItem(expandedItem === title ? null : title);
+  };
+
+  const closeMenu = () => {
+    setMobileMenuOpen(false);
+    setExpandedItem(null);
+  };
+
+  return (
+    <nav
+      ref={navRef}
+      className="px-4 z-50 fixed w-full max-w-5xl left-1/2 -translate-x-1/2 mt-4"
+    >
+      <div className="flex flex-col bg-background/50 rounded-lg shadow-xs backdrop-blur-2xl transition-all duration-300">
+        {/* Barre de navigation principale */}
+        <div className="flex justify-between items-center p-2.5">
+          <Link href={Routes.landing.visitor} onClick={closeMenu}>
+            <OnRuntimeWordMark className="h-6" height={24} />
+          </Link>
+
+          <Navigation />
+
+          <div className="flex gap-2">
+            <Link href={Routes.contact}>
+              <Button className="hidden md:inline-flex" variant="outline">
+                Nous contacter
+              </Button>
+            </Link>
+
+            <Button
+              onClick={toggleMobileMenu}
+              className="inline-flex md:hidden"
+              variant="outline"
+              aria-expanded={mobileMenuOpen}
+              aria-label="Toggle menu"
+            >
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Menu</span>
+            </Button>
+          </div>
+        </div>
+
+        {/* Menu mobile */}
+        {mobileMenuOpen && (
+          <MobileMenu
+            items={navItems}
+            expandedItem={expandedItem}
+            onItemToggle={toggleItem}
+            onClose={closeMenu}
+          />
+        )}
+      </div>
+    </nav>
+  );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file