imp bg card Expertises

frontend/src/assets/logo-in3.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
+<svg width="100px" height="100px" id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
   <g id="Calque_1" data-name="Calque 1">
     <polyline points="315.48 135.3 358.16 181.43 306.75 228.68" style="fill: none; stroke: #d54f32; stroke-miterlimit: 10;"/>
   </g>

frontend/src/components/Expertises.jsx

@@ -1,5 +1,8 @@
 import React from "react";
 import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
+import pictoMaitriseOeuvre from "../assets/picto-maitrise-oeuvre.avif";
+import pictoStructure from "../assets/picto-structure.avif";
+import pictoElectricite from "../assets/picto-electricite.avif";
 
 const Expertices = ({
   expertiseTitle,
@@ -31,14 +34,23 @@ const Expertices = ({
         {expertiseTitle}
       </Typography>
       <Grid container spacing={4}>
+
         {/* Expertise 1 */}
         <Grid item xs={12} md={4}>
           <Card
             sx={{
+              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoMaitriseOeuvre})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
+              
             }}
           >
             <CardContent>
@@ -65,6 +77,12 @@ const Expertices = ({
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoStructure})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
             }}
           >
             <CardContent>
@@ -91,6 +109,12 @@ const Expertices = ({
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoElectricite})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
             }}
           >
             <CardContent>

frontend/src/components/Header.jsx

@@ -143,8 +143,9 @@ const Header = () => {
             src={Logo}
             alt="Bureau d'études Le Mans"
             style={{
-              height: "40px",
-              width: "auto",
+              width: "50px",
+              height: "50px",
+              objectFit: "contain",
             }}
           />
         </Box>
@@ -326,7 +327,7 @@ const Header = () => {
             src={LogoM}
             alt="Logo"
             style={{
-              height: "40px",
+              height: "50px",
               width: "auto",
             }}
           />