embed share

frontend/src/app/pages/home/menu/menu.scss

@@ -4,18 +4,111 @@
   border-right: 1px solid #e9ecef;
   min-height: 100vh;
   padding: 1rem;
+  
+  @media (max-width: 768px) {
+    position: relative;
+    min-height: auto;
+    padding: 0.75rem;
+    border-right: none;
+    border-bottom: 1px solid #e9ecef;
+  }
+}
+
+// Overlay pour mobile (masqué par défaut, montré quand le menu est ouvert)
+.menu-overlay {
+  display: none;
+  
+  @media (max-width: 768px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    
+    &.overlay-active {
+      display: block;
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
 }
 
 .menu-header {
   margin-bottom: 2rem;
   padding-bottom: 1rem;
   border-bottom: 2px solid #3498db;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
 
   h1 {
     color: #2c3e50;
     margin: 0;
     font-size: 1.5rem;
     font-weight: 700;
+    flex: 1;
+    
+    @media (max-width: 768px) {
+      font-size: 1.2rem;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+  }
+}
+
+// Bouton burger menu
+.burger-menu-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 1001;
+  transition: all 0.3s ease;
+  
+  @media (max-width: 768px) {
+    display: flex;
+  }
+  
+  &:focus {
+    outline: 2px solid #3498db;
+    outline-offset: 2px;
+  }
+}
+
+.burger-line {
+  width: 100%;
+  height: 3px;
+  background: #2c3e50;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+  transform-origin: center;
+}
+
+.burger-menu-toggle[aria-expanded="true"] {
+  .burger-line:nth-child(1) {
+    transform: rotate(45deg) translate(7px, 7px);
+  }
+  
+  .burger-line:nth-child(2) {
+    opacity: 0;
+  }
+  
+  .burger-line:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
   }
 }
 
@@ -23,6 +116,28 @@
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  transition: all 0.3s ease;
+  
+  @media (max-width: 768px) {
+    position: relative;
+    z-index: 1000;
+    background: #f8f9fa;
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    gap: 1.5rem;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    
+    &.nav-open {
+      max-height: 2000px;
+      opacity: 1;
+      margin-top: 1rem;
+      padding: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid #e9ecef;
+    }
+  }
 }
 
 .nav-section {