chore: add ansible backend docker frontend-prep

frontend-prep/src/pages/User/UserAccueil_new.css

@@ -0,0 +1,90 @@
+.user-page-container {  
+    width: 100%;  
+    min-height: 100vh;  
+    padding: clamp(1rem, 3vw, 1.5rem);  
+    padding-top: calc(60px + clamp(1rem, 3vw, 1.5rem));  
+    box-sizing: border-box;  overflow-x: hidden;  margin-top: 0;
+}
+.category-filter {
+    display: flex;  
+    gap: clamp(0.5rem, 2vw, 0.8rem);  
+    overflow-x: auto;  
+    padding-bottom: clamp(1rem, 3vw, 1.5rem);  
+    margin-bottom: clamp(1rem, 3vw, 1.5rem);  
+    scrollbar-width: none;  -ms-overflow-style: none;
+}
+.category-filter::-webkit-scrollbar {  
+    display: none;
+}
+.category-button {
+    background-color: transparent;  
+    color: white;  
+    border: 2px solid rgba(255, 255, 255, 0.3);  
+    border-radius: 25px;  
+    padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1.2rem, 3vw, 1.5rem);  
+    font-size: clamp(0.9rem, 3vw, 1rem);  
+    font-weight: 600;  cursor: pointer;  
+    transition: all 0.3s ease;  
+    white-space: nowrap;  
+    -webkit-tap-highlight-color: transparent;  
+    flex-shrink: 0;
+}
+.category-button:active {  
+    transform: scale(0.95);
+}
+.category-button.active {  
+    background-color: white; 
+    color: black;  
+    border-color: white;
+}
+@media (hover: none) {  
+    .category-button:hover {    
+        background-color: transparent;    
+        color: white;  
+    }    
+    .category-button.active:hover {    
+        background-color: white;    
+        color: black;  
+    }
+    .products-grid {  
+        display: grid;  
+        grid-template-columns: repeat(2, 1fr);  
+        gap: clamp(0.8rem, 3vw, 1.2rem);  
+        width: 100%;  
+        max-width: 1200px;  
+        margin: 0 auto;  
+        padding-top: 0;
+    }
+    /* Petits téléphones */
+    @media (max-width: 360px) {  
+        .products-grid {    gap: 0.6rem;  }    
+        .user-page-container {    
+            padding: 0.8rem;    
+            padding-top: calc(60px + 0.8rem);  
+        }
+    }
+    /* Tablettes portrait */
+    @media (min-width: 600px) {
+        .products-grid {    
+            grid-template-columns: repeat(3, 1fr);    
+            gap: 1.5rem;  
+        }    
+        .user-page-container {    
+            padding: 2rem;    
+            padding-top: calc(60px + 2rem);  
+        }
+    }
+    /* Tablettes paysage */
+    @media (min-width: 900px) {  
+        .products-grid {    
+            grid-template-columns: repeat(4, 1fr);    
+            gap: 1.5rem;  
+        }
+    }
+    /* Désactiver hover sur tactile */
+    @media (hover: none) {  
+        .user-header .back-link:hover {    
+            background-color: transparent;  
+        }
+    }
+}