diff --git a/SAE_WEB1/README.md b/SAE_WEB1/README.md
new file mode 100644
index 0000000..c1a7d7c
--- /dev/null
+++ b/SAE_WEB1/README.md
@@ -0,0 +1 @@
+# site-web-ArtEtSaveurs
diff --git a/SAE_WEB1/css/style_contact.css b/SAE_WEB1/css/style_contact.css
new file mode 100644
index 0000000..9ad0622
--- /dev/null
+++ b/SAE_WEB1/css/style_contact.css
@@ -0,0 +1,106 @@
+
+/* Formulaire de contact */
+.contact-form {
+    max-width: 600px;
+    margin: 30px auto 0; /* Ajout d'un espace de 20px en haut */
+    background-color: #fff;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.contact-form h2 {
+    color: #a6aa7f;
+    text-align: center;
+}
+
+.contact-form label {
+    display: block;
+    margin: 10px 0 5px;
+    font-weight: bold;
+    color: #333;
+}
+
+.contact-form input,
+.contact-form textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.contact-form button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #ffcc00;
+    color: #333;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.contact-form button:hover {
+    background-color: #e6b800;
+}
+
+/* Responsivité */
+@media (max-width: 768px) {
+    .burger-menu {
+        display: flex; /* Affiche le menu burger */
+    }
+
+    nav {
+        display: none; /* Cache le menu par défaut sur petits écrans */
+    }
+
+    nav.open {
+        display: block; /* Affiche le menu lors de l'ouverture */
+    }
+
+    nav ul {
+        display: flex;
+        flex-direction: column; /* Les liens deviennent verticaux */
+        gap: 20px;
+    }
+}
+
+/* Boutons globaux */
+.btn {
+    display: inline-block;
+    background-color: #fefae0;
+    color: #333;
+    padding: 10px 20px;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 5px;
+    text-align: center;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #e6b800;
+    color: #000;
+}
+
+/* Pied de page sticky */
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: auto; /* Assure que le pied de page reste en bas */
+}
+
+footer p {
+    margin: 0;
+}
+
+footer span {
+    color: #ffd700;
+}
+
+.cv-atik {
+    display:block
+}
\ No newline at end of file
diff --git a/SAE_WEB1/css/style_cv_manu.css b/SAE_WEB1/css/style_cv_manu.css
new file mode 100644
index 0000000..3939917
--- /dev/null
+++ b/SAE_WEB1/css/style_cv_manu.css
@@ -0,0 +1,80 @@
+/* Styles généraux */
+body {
+    display: flex;
+    flex-direction: column; /* Orientation en colonne */
+    margin: 0;
+    padding: 0;
+    font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
+    background-color: #f5f5f5; /* Couleur de fond générale */
+    line-height: 1.6;
+}
+
+.cote_gauche, div.myname, div.formation, div.exp_pro, div.projets-info {
+    width: 90%; /* Occupe 90% de la largeur de la page */
+    max-width: 800px; /* Largeur maximale pour éviter que ce soit trop étiré */
+    margin: 20px auto; /* Centre les sections horizontalement */
+    padding: 20px;
+    background-color: #fff; /* Fond blanc */
+    border-radius: 8px; /* Coins arrondis */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre élégante */
+}
+
+/* Ajustement spécifique pour la section gauche */
+.cote_gauche {
+    background-color: #94c4e2; /* Fond bleu clair */
+    color: #333; /* Texte sombre */
+}
+
+.photo_me {
+    display: block;
+    margin: 0 auto 20px;
+    border-radius: 8px; /* Ajout d'arrondi */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre discrète */
+}
+
+h3, h2 {
+    margin: 15px 0;
+    color: #333;
+    text-align: center;
+}
+
+h3 {
+    font-size: 1.2em;
+    text-align: left; /* Alignement gauche pour les titres secondaires */
+}
+
+ul {
+    padding-left: 20px;
+    margin: 10px 0;
+}
+
+li {
+    margin-bottom: 10px;
+    color: #555;
+}
+
+a {
+    color: #0066cc;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Titres principaux */
+.for-titre, .exp-titre, .proj-titre {
+    font-size: 1.5em;
+    color: #2c3e50;
+    border-bottom: 2px solid #94c4e2; /* Ligne décorative */
+    padding-bottom: 5px;
+    margin-bottom: 15px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .cote_gauche, div.myname, div.formation, div.exp_pro, div.projets-info {
+        width: 100%; /* Utilisation de toute la largeur disponible */
+        padding: 10px;
+    }
+}
diff --git a/SAE_WEB1/css/style_cv_wael.css b/SAE_WEB1/css/style_cv_wael.css
new file mode 100644
index 0000000..f8642c9
--- /dev/null
+++ b/SAE_WEB1/css/style_cv_wael.css
@@ -0,0 +1,158 @@
+/* Style général du corps */
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: white;
+    color: black;
+    box-sizing: border-box;
+}
+
+/* Conteneur principal */
+.cv-container {
+    display: flex;
+    padding: 20px;
+    box-sizing: border-box;
+    flex-wrap: wrap; /* Permet aux éléments de se replier sur plusieurs lignes */
+}
+
+/* Sidebar */
+.sidebar {
+    background-color: #163853;
+    color: white;
+    width: 20%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: auto;
+    box-sizing: border-box;
+    margin: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.sidebar img {
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    margin-bottom: 20px;
+}
+
+.sidebar h2 {
+    margin: 10px 0;
+    font-size: 20px;
+}
+
+.sidebar a {
+    color: white;
+    text-decoration: none;
+    margin: 5px 0;
+    display: block;
+}
+
+.sidebar a:hover {
+    text-decoration: underline;
+}
+
+.sidebar ul {
+    list-style-type: disc;
+    padding-left: 20px;
+}
+
+/* Contenu principal */
+.main-content {
+    width: 80%;
+    padding: 20px;
+    box-sizing: border-box;
+    margin-left: 20%;
+}
+
+.section {
+    margin-bottom: 20px;
+}
+
+.section h3 {
+    border-bottom: 2px solid #163853;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+}
+
+.section p, .section ul {
+    margin: 5px 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    /* Sidebar */
+    .sidebar {
+        position: relative;
+        width: 100%;
+        height: auto;
+        margin: 0;
+        padding: 10px;
+    }
+
+    .sidebar img {
+        width: 100px;
+        height: 100px;
+        margin: 0 auto 10px;
+    }
+
+    .sidebar h2 {
+        font-size: 18px;
+    }
+
+    /* Contenu principal */
+    .main-content {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    /* Ajustement des sections */
+    .section {
+        margin-bottom: 15px;
+    }
+
+    /* Compétences */
+    .skills-container {
+        display: block;
+        width: 100%;
+    }
+
+    .skills-list {
+        width: 100%;
+        padding-left: 20px;
+    }
+
+    /* Text alignement */
+    .title-container, .description {
+        text-align: center;
+    }
+}
+
+/* Pour les très petits écrans (comme les téléphones) */
+@media (max-width: 480px) {
+    /* Réduire la taille des éléments pour mieux s'adapter */
+    .sidebar img {
+        width: 80px;
+        height: 80px;
+    }
+
+    .sidebar h2 {
+        font-size: 16px;
+    }
+
+    .sidebar a {
+        font-size: 14px;
+    }
+
+    .section h3 {
+        font-size: 16px;
+    }
+
+    .section p, .section ul {
+        font-size: 14px;
+    }
+}
diff --git a/SAE_WEB1/css/style_disponibilite.css b/SAE_WEB1/css/style_disponibilite.css
new file mode 100644
index 0000000..bcb37e2
--- /dev/null
+++ b/SAE_WEB1/css/style_disponibilite.css
@@ -0,0 +1,195 @@
+/* Styles généraux pour la page */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+img {
+    height: 100px;
+    width: auto;
+    margin-left: 20px;
+}
+
+/* Mise en surbrillance pour la date sélectionnée */
+.selected {
+    background-color: rgb(255, 208, 122);
+    color: white;
+    font-weight: bold;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f4f4f9;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    overflow-x: hidden;
+}
+
+/* Conteneur principal du calendrier et du formulaire */
+main {
+    width: 100%;
+    max-width: 1200px;
+    margin-top: 50px; /* Espacement ajusté après l'en-tête */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+/* Conteneur du calendrier */
+.calendar-container {
+    background-color: white;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 900px;
+    margin-bottom: 40px;
+    border: 2px solid #333;
+    text-align: center;
+}
+
+/* Calendrier */
+#calendar {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.calendar-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+    gap: 20px;
+}
+
+.arrow {
+    cursor: pointer;
+    font-size: 24px;
+    font-weight: bold;
+    user-select: none;
+}
+
+table {
+    width: 100%;
+    border: 2px solid black;
+    border-collapse: collapse;
+    margin: 0 auto;
+}
+
+/* Style des cellules du tableau */
+th, td {
+    padding: 0;
+    text-align: center;
+    border: 1px solid black;
+    cursor: pointer;
+    position: relative;
+    height: 100px; /* Hauteur fixe de la cellule */
+}
+
+/* Style pour l'en-tête */
+th {
+    background-color: #F9A03F;
+    color: white;
+}
+
+td:hover {
+    background-color: #ffcc00;
+}
+
+/* Modification pour les réservations (midi et soir) */
+td .midi.reserved, td .soir.reserved {
+    background-color: red;
+    color: white;
+    font-weight: bold;
+    display: block;
+    width: 100%; 
+    text-align: center;
+    height: 50%;
+}
+
+/* Les divs pour midi et soir prennent chacune la moitié de la cellule */
+td .midi, td .soir {
+    display: block;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+td .midi {
+    height: 50%; /* Limite la hauteur à 50% de la cellule */
+}
+
+td .soir {
+    height: 50%;
+}
+
+/* Formulaire de réservation */
+.reservation-form {
+    background-color: #F9F9F9;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 500px;
+    margin: 20px auto; /* Centrer et espacer */
+    display: none;
+    text-align: left;
+}
+
+/* Champ de texte */
+input[type="text"], input[type="email"], select {
+    padding: 12px;
+    width: 100%;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+button {
+    padding: 15px 30px;
+    font-size: 18px;
+    font-weight: bold;
+    border: none;
+    border-radius: 10px;
+    background-color: #F9A03F;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #ff8c42;
+}
+
+#reservation-tab {
+    font-size: 24px;
+    font-weight: bold;
+    color: #F9A03F;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+
+/* Pied de page */
+footer {
+    background-color: #333;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
+
+footer p {
+    margin: 0;
+}
diff --git a/SAE_WEB1/css/style_global.css b/SAE_WEB1/css/style_global.css
new file mode 100644
index 0000000..6d4ddf1
--- /dev/null
+++ b/SAE_WEB1/css/style_global.css
@@ -0,0 +1,594 @@
+/* Styles de base pour tout le site */
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    width: 100%;
+    height: 100vh;  
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    
+    background: url("../img/img-fond-chef.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+}
+.intro {
+    padding: 20px;
+    text-align: center;
+}
+
+.intro h2 {
+    color: #a6aa7f;
+    font-size: 2rem;
+}
+
+.intro p {
+    color: #555;
+    font-size: 1.2rem;
+}
+
+.intro .btn {
+    display: inline-block;
+    background-color: #ffcc00;
+    color: #333;
+    padding: 10px 20px;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 5px;
+}
+
+.intro .btn:hover {
+    background-color: #e6b800;
+    color: #000;
+}
+/* Style pour le bouton "S'inscrire" */
+.register-button {
+    display: inline-block;
+    padding: 10px 30px;
+    background-color: #ffa861;
+    color: #fff;
+    font-weight: bold;
+    text-decoration: none;
+    border-radius: 30px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-left: 15px; /* Espacement à gauche du burger pour la version desktop */
+    align-self: center; /* Centre verticalement le bouton */
+    position: absolute;
+    top: 75px;
+    right: 25px; /* Positionne à droite de "S'inscrire" */
+}
+
+/* Style pour le bouton "Se connecter" */
+.login-button {
+    display: inline-block;
+    padding: 10px 15px;
+    background-color: #fff; /* Vert pour le bouton de connexion */
+    color: #e6ab7b;
+    font-weight: bold;
+    text-decoration: none;
+    border-radius: 30px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-left: 15px; /* Espacement à gauche du bouton "S'inscrire" */
+    align-self: center; /* Centre verticalement le bouton */
+    position: absolute;
+    top: 15px;
+    right: 25px; /* Positionne à droite */
+}
+
+/* Lorsque le menu burger est ouvert, place les boutons à côté */
+header nav.open {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end; /* Aligne les éléments à droite */
+}
+
+/* Modifications spécifiques aux petits écrans */
+@media (max-width: 768px) {
+    .burger-menu {
+        display: flex; /* Affiche le menu burger */
+    }
+
+    /* Positionne les boutons "S'inscrire" et "Se connecter" à côté du burger sur mobile */
+    .register-button {
+        position: absolute;
+        top: 15px;
+        right: 75px; /* Positionne à côté du burger */
+        z-index: 15;
+    }
+
+    .login-button {
+        position: absolute;
+        top: 80px;
+        right: 75px; /* Positionne à côté du burger (ajustez la position si nécessaire) */
+        z-index: 15;
+    }
+
+    /* Lorsque le menu est ouvert, déplace les boutons dans le menu */
+    header nav.open .register-button,
+    header nav.open .login-button {
+        position: absolute;
+        right: 15px;
+    }
+
+    header nav ul {
+        flex-direction: column;
+        gap: 20px;
+        padding-left: 10px;
+    }
+
+    header nav ul li {
+        margin: 10px 0;
+    }
+}
+/* Style de l'en-tête */
+header {
+	position : sticky;
+	top : 0;
+    background-color: #F9A03F;
+    color: white;
+    padding: 20px 0;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 100%;
+}
+
+header h1 {
+    margin: 0;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    gap: 25px;
+}
+
+nav ul li {
+    display: inline-block;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 16px;
+    padding: 5px 15px;
+    transition: all 0.3s ease;
+    align-items: center;
+}
+
+nav ul li a:hover {
+    background-color: #ffcc00;
+    border-radius: 5px;
+}
+
+
+/* Style de l'en-tête */
+header {
+    position : sticky;
+    top : 0;
+    background-color: #F9A03F;
+    color: white;
+    padding: 20px 0;
+    text-align: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 100%;
+}
+
+header h1 {
+    margin: 0;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    gap: 25px;
+}
+
+nav ul li {
+    display: inline-block;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 16px;
+    padding: 5px 15px;
+    transition: all 0.3s ease;
+}
+
+nav ul li a:hover {
+    background-color: #ffcc00;
+    border-radius: 5px;
+}
+
+
+/* Conteneur principal avec barres latérales */
+.main-container-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    flex-grow: 1;
+}
+
+/* Style pour les barres latérales */
+.sidebar {
+    width: 250px; /* Largeur des barres latérales */
+    background-color: #818181; /* Exemple de couleur de fond */
+    height: 100%; /* Prend toute la hauteur */
+}
+
+/* Conteneur du main-container */
+.main-container {
+    margin: 0 auto;
+    max-width: 1000px; /* Largeur maximale */
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    background-color: #fff; /* Fond blanc pour le contenu */
+    background-color: #fefae0;
+    flex-grow: 1; /* Prend tout l'espace restant entre les barres latérales */
+}
+
+
+
+/* Style FAQ */
+.faq {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.faq h2 {
+    font-size: 2rem;
+    color: #a6aa7f;
+    text-align: center;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.faq-item {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.faq-item h3 {
+    font-size: 1.5rem;
+    color: #a6aa7f;
+    margin-bottom: 10px;
+}
+
+.faq-item p {
+    color: #555;
+}
+
+/* Style de la flèche de retour en haut */
+.scroll-to-top {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background-color: #ffcc00;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    opacity: 0.6; /* Diminution de l'opacité */
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1000; /* S'assurer que la flèche soit au-dessus */
+}
+
+.scroll-to-top:hover {
+    opacity: 0.9; /* Moins opaque au survol */
+    transform: scale(1.1); /* Effet de zoom */
+}
+
+.scroll-to-top img {
+    width: 30px; /* Ajuster la taille de l'image de la flèche */
+    height: 30px;
+}
+
+/* Style pour la section des avis */
+.reviews {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.reviews h2 {
+    font-size: 2rem;
+    color: #a6aa7f;
+    text-align: center;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.review-item {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.review-item p {
+    color: #555;
+}
+
+.review-item .stars {
+    color: #ffcc00;
+}
+
+/* Style de la section des prix moyens */
+.price-range {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.price-range h2 {
+    font-size: 2rem;
+    color: #a6aa7f;
+    text-align: center;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+.price-range p {
+    font-size: 1.2rem;
+    color: #555;
+    text-align: center;
+}
+
+
+/* Menu burger */
+.burger-menu {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+    padding: 15px;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    z-index: 15; /* Toujours au-dessus du contenu */
+    background: none; /* Pas de fond */
+    border: none; /* Pas de bordure */
+}
+.burger-menu span {
+    display: block;
+    width: 30px;
+    height: 3px;
+    background-color: #fff;
+    border-radius: 3px;
+}
+
+
+/* Responsivité - Menu burger visible seulement sur petit écran */
+@media (max-width: 768px) {
+    header nav {
+        display: none; /* Cache la navigation classique sur petit écran */
+    }
+
+    .burger-menu {
+        display: flex; /* Affiche le menu burger */
+    }
+
+    header nav.open {
+        display: block;
+        position: absolute;
+        top: 140px; /* Ajoute un espace pour le logo */
+        left: 0;
+        background-color: #F9A03F;
+        width: 100%; /* Prend toute la largeur */
+        padding: 10px 0; /* Ajuste la hauteur du menu */
+        z-index: 10;
+    }
+
+    header nav ul {
+        flex-direction: column;
+        gap: 20px;
+        padding-left: 10px;
+    }
+
+    header h1 {
+        z-index: 12; /* Toujours visible */
+    }
+
+    .burger-menu {
+        position: fixed; /* Fixe le bouton burger */
+        z-index: 15;
+    }
+}
+
+
+/* Section des chefs */
+.chefs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background-color: #fefae0;
+}
+
+.chef {
+    background-color: #fff;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 10px; /* Coins arrondis */
+    width: 250px;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.chef:hover {
+    transform: translateY(-5px); /* Légère élévation */
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
+}
+
+.chef h3 {
+    color: #a6aa7f; /* Couleur accentuée pour le nom */
+    font-size: 1.5rem;
+    margin: 10px 0;
+}
+.chef img {
+    border-radius: 50%; /* Pour arrondir l'image en cercle */
+    width: 100%; /* Ajustez la taille si nécessaire */
+    height: auto; /* Garder les proportions */
+}
+
+.chef p,
+.chef ul li {
+    color: #555; /* Couleur de texte discrète */
+    font-size: 1rem;
+    margin: 5px 0;
+}
+
+.chefs .chef a {
+    text-decoration: none; /* Supprime le soulignement */
+    color: inherit; /* Utilise la couleur du parent */
+    font-weight: bold;
+}
+
+.chefs .chef a:hover {
+    text-decoration: none; /* Ajoute un soulignement au survol */
+    color: #F9A03F; /* Couleur d'accentuation */
+}
+
+/* Formulaire de contact */
+.contact-form {
+    max-width: 600px;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.contact-form h2 {
+    color: #a6aa7f;
+    text-align: center;
+}
+
+.contact-form label {
+    display: block;
+    margin: 10px 0 5px;
+    font-weight: bold;
+    color: #333;
+}
+
+.contact-form input,
+.contact-form textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.contact-form button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #ffcc00;
+    color: #333;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.contact-form button:hover {
+    background-color: #e6b800;
+}
+
+/* Responsivité */
+@media (max-width: 768px) {
+    .burger-menu {
+        display: flex; /* Affiche le menu burger */
+    }
+
+    nav.main-menu {
+        display: none; /* Cache le menu par défaut sur petits écrans */
+    }
+
+    nav.open {
+        display: block; /* Affiche le menu lors de l'ouverture */
+    }
+
+    nav.open ul {
+        flex-direction: column; /* Les liens deviennent verticaux */
+        gap: 20px;
+    }
+}
+
+/* Boutons globaux */
+.btn {
+    display: inline-block;
+    background-color: #fefae0;
+    color: #333;
+    padding: 10px 20px;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 5px;
+    text-align: center;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #e6b800;
+    color: #000;
+}
+
+/* Pied de page sticky */
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: auto; /* Assure que le pied de page reste en bas */
+    width: 100%;
+}
+
+footer p {
+    margin: 0;
+}
+
+footer span {
+    color: #ffd700;
+}
diff --git a/SAE_WEB1/css/style_recettes-global.css b/SAE_WEB1/css/style_recettes-global.css
new file mode 100644
index 0000000..37cff18
--- /dev/null
+++ b/SAE_WEB1/css/style_recettes-global.css
@@ -0,0 +1,176 @@
+/* Menu burger */
+.burger-menu {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+    padding: 15px;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    z-index: 15; /* Toujours au-dessus du contenu */
+    background: none; /* Pas de fond */
+    border: none; /* Pas de bordure */
+}
+/* Les lignes du burger */
+.burger-menu span {
+    display: block;
+    width: 30px;
+    height: 3px;
+    background-color: #fff;
+    border-radius: 3px;
+}
+
+/* Responsivité - Menu burger visible seulement sur petit écran */
+@media (max-width: 768px) {
+    header nav {
+        display: none; /* Cache la navigation classique sur petit écran */
+    }
+
+    .burger-menu {
+        display: flex; /* Affiche le menu burger */
+    }
+
+    header nav.open {
+        display: block;
+        position: absolute;
+        top: 140px; /* Ajoute un espace pour le logo */
+        left: 0;
+        background-color: #F9A03F;
+        width: 100%; /* Prend toute la largeur */
+        padding: 10px 0; /* Ajuste la hauteur du menu */
+        z-index: 10;
+    }
+
+    header nav ul {
+        flex-direction: column;
+        gap: 20px;
+        padding-left: 10px;
+    }
+
+    header h1 {
+        z-index: 12; /* Toujours visible */
+    }
+
+    .burger-menu {
+        position: fixed; /* Fixe le bouton burger */
+        z-index: 15;
+    }
+}
+
+.recette {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    background-color: #fff;
+    margin: 20px auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 800px;
+}
+
+.recette img {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 20px;
+}
+
+.recette h2 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+    color: #000000;
+}
+
+.recette p {
+    font-size: 1rem;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.recette ul li {
+    color:#333;
+    display: inline;
+    font-size: 20px;
+    margin:15px;
+}
+
+
+/* Section des étapes de la recette */
+.etapes-recette {
+    max-width: 800px;
+    margin: 20px auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    text-align: left;
+}
+
+.etapes-recette h2 {
+    font-size: 2rem;
+    margin-bottom: 10px;
+    color: #000;
+    text-align: center;
+}
+
+.etapes-recette ol {
+    padding-left: 40px;
+    font-size: 1rem;
+    color: #333;
+}
+
+.etapes-recette ol li {
+    margin-bottom: 10px;
+    line-height: 1.6;
+}
+
+
+.contact-form {
+    max-width: 600px;
+    margin: 30px auto;
+    background-color: #fff;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.contact-form h2 {
+    color: #a6aa7f;
+    text-align: center;
+}
+
+.contact-form label {
+    display: block;
+    margin: 10px 0 5px;
+    font-weight: bold;
+    color: #333;
+}
+
+.contact-form input,
+.contact-form textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+.contact-form button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #ffcc00;
+    color: #333;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.contact-form button:hover {
+    background-color: #e6b800;
+}
\ No newline at end of file
diff --git a/SAE_WEB1/css/style_recettes.css b/SAE_WEB1/css/style_recettes.css
new file mode 100644
index 0000000..c4be217
--- /dev/null
+++ b/SAE_WEB1/css/style_recettes.css
@@ -0,0 +1,122 @@
+/* Mise en page générale */
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    color: #333;
+    background-color: #fefae0; /* Couleur de fond légère */
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.titre {
+    margin: auto;
+    align-items: center;
+}
+
+/* Section des chefs */
+.chefs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background-color: #fefae0;
+}
+
+.chef {
+    background-color: #fff;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 10px; /* Coins arrondis */
+    width: 250px;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.chef:hover {
+    transform: translateY(-5px); /* Légère élévation */
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
+}
+
+.chef h3 {
+    color: #a6aa7f; /* Couleur accentuée pour le nom */
+    font-size: 1.5rem;
+    margin: 10px 0;
+}
+
+.chef p,
+.chef ul li {
+    color: #555; /* Couleur de texte discrète */
+    font-size: 1rem;
+    margin: 5px 0;
+}
+
+.chefs .chef a {
+    text-decoration: none; /* Supprime le soulignement */
+    color: inherit; /* Utilise la couleur du parent */
+    font-weight: bold;
+}
+
+.chefs .chef a:hover {
+    text-decoration: none; /* Ajoute un soulignement au survol */
+    color: #F9A03F; /* Couleur d'accentuation */
+}
+
+/* Section des recettes */
+.recettes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    background-color: #fefae0;
+}
+
+.recette {
+    background-color: #fff;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 10px; /* Coins arrondis */
+    width: 400px;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.recette:hover {
+    transform: translateY(-2px); /* Légère élévation */
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
+}
+
+.recette h4 {
+    color: #a6aa7f; /* Couleur accentuée pour le titre */
+    font-size: 1.35rem;
+    margin: 10px 0;
+}
+
+.recette img {
+    width: 300px;
+    height: auto;
+}
+
+.recette p {
+    color: #555; /* Couleur de texte discrète */
+    font-size: 0.9rem;
+    margin: 5px 0;
+}
+
+.recettes .recette a {
+    text-decoration: none; /* Supprime le soulignement */
+    color: inherit; /* Conserve la couleur parent */
+    font-weight: bold;
+}
+
+.recettes .recette a:hover {
+    text-decoration: none;
+    color: #F9A03F; /* Couleur d'accentuation */
+}
+
diff --git a/SAE_WEB1/html/apropos.html b/SAE_WEB1/html/apropos.html
new file mode 100644
index 0000000..1183be5
--- /dev/null
+++ b/SAE_WEB1/html/apropos.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Accueil - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+</head>
+<style>/* Style global */
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #fefae0;
+            color: #333;
+        }
+
+        .main-menu.open {
+            display: block;
+            flex-direction: column;
+            font-size: 10px; /* Remplace par la taille souhaitée */
+        }
+        
+        main {
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin: 20px auto;
+            border-radius: 8px;
+            max-width: 1200px;
+        }
+        
+        main section {
+            margin-bottom: 30px;
+        }
+        
+        main h2 {
+            color: #444;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        
+        main h4 {
+            color: #555;
+            margin-bottom: 15px;
+            text-align: center;
+        }
+        
+        main p {
+            color: #666;
+            text-align: justify;
+            margin-bottom: 20px;
+        }
+        
+        /* Style des boxes pour chaque chef */
+        main .cv-atik, .cv-manu, .cv-konan {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px;
+            background-color: #fbede0;
+            border: 1px solid #ddd;
+            margin: 10px 0;
+            border-radius: 5px;
+        }
+
+        /* Alignement vertical pour les petits écrans */
+        main .cv-atik, .cv-manu, .cv-konan {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        /* Styles des liens */
+        main .cv-atik a, main .cv-manu a, main .cv-konan a {
+            text-decoration: none;
+            color: #fff;
+            background-color: #007BFF;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 14px;
+        }
+
+        /* Changer la couleur au survol */
+        main .cv-atik a:hover, main .cv-manu a:hover, main .cv-konan a:hover {
+            background-color: #0056b3;
+        }
+
+        
+        footer {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+            position: relative;
+            bottom: 0;
+            width: 100%;
+        }
+            .cv-atik, .cv-manu, .cv-konan {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+    </style>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-menu">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li>
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+        
+    </header>
+    
+    
+    <main>
+        <section class="presentation">
+            <h2>Qui sommes-nous ?</h2>
+            <h4>Bienvenue chez <strong>Etoiles et Saveurs</strong></h4>
+            <p> 
+            Chez Étoiles et Saveurs, nous croyons que chaque repas est une occasion de créer des souvenirs inoubliables. 
+            C'est pourquoi nous avons créé un service unique qui vous permet de profiter du savoir-faire des meilleurs chefs directement dans le confort de votre maison.
+            Notre mission ? Apporter l'excellence de la gastronomie à votre table, en amenant jusqu'à vous de véritables expériences étoilées.
+            </p>
+        </section>
+        <section class="notre-histoire">
+            <h2>Notre histoire</h2>
+            <p>
+                Tout a commencé avec une passion commune pour la gastronomie et une vision audacieuse : 
+                rendre la haute cuisine accessible à tous. En 2020, Wael Atik, Emmanuel Tiamzon et Josué Konan 
+                ont uni leurs forces pour créer une entreprise qui révolutionne la manière dont nous expérimentons 
+                la gastronomie.
+            </p>
+            <p>
+                Aujourd'hui, Étoiles & Saveurs est fier de collaborer avec des chefs renommés pour vous offrir des 
+                expériences culinaires inoubliables dans le confort de votre foyer.
+            </p>
+        </section>
+        
+
+        <div class="cv-atik">
+            <p>Wael ATIK : Fondateur et ingénieur en chef d'Etoiles et Saveurs.</p><a href="cv_wael.html" class="btn" target="_blank">Ouvrir le CV</a>
+        </div>
+        
+        <div class="cv-manu">
+            <p>Emmanuel TIAMZON : Chef cuisinier et co-fondateur de notre entreprise.</p>
+            <a href="cv_manu.html" class="btn" target="_blank">Ouvrir le CV</a>
+        </div>
+        
+        <div class="cv-konan">
+            <p>Josué KONAN : Assistant et collaborateur dans la création de l'entreprise.</p>
+            <a href="cv_josue.html" class="btn" target="_blank">Ouvrir le CV</a>
+        </div>
+        
+ 
+    </main>
+        
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+<script>
+    const burgerMenu = document.querySelector('.burger-menu');
+    const nav = document.querySelector('header nav');
+
+    burgerMenu.addEventListener('click', () => {
+        nav.classList.toggle('open');
+    });
+
+    // Réinitialise le menu si la fenêtre est redimensionnée au-delà de 768px
+    window.addEventListener('resize', () => {
+        if (window.innerWidth > 768) {
+            nav.classList.remove('open');
+        }
+    });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/SAE_WEB1/html/autre.php b/SAE_WEB1/html/autre.php
new file mode 100644
index 0000000..b281391
--- /dev/null
+++ b/SAE_WEB1/html/autre.php
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        
+    </head>
+    <body>
+        <?php /*exercice 3 : */ 
+            foreach($data as $person){
+                echo"<tr>";
+                foreach($person as $value)
+                    echo "<td>$value</td>";
+                $imc = round($person['Poids']/($person['Taille'] * $person[$taille])*10000,2);
+                $warning = "";
+                if ($imc >= 25)
+                    $warning = 'warning';
+                    echo "<tr class='$warning'>"
+                        foreach($person as $value)
+                            echo "<td>$value</td>"
+                    echo "<td>$imc</td></tr>";
+            }
+        ?>
+    </body>
+</html>
\ No newline at end of file
diff --git a/SAE_WEB1/html/carte_chefs.html b/SAE_WEB1/html/carte_chefs.html
new file mode 100644
index 0000000..3a057dc
--- /dev/null
+++ b/SAE_WEB1/html/carte_chefs.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carte des Chefs - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+    <style>
+        /* Carte des Chefs */
+        #map {
+            height: 700px;
+            width: 700px;
+            margin: 20px 0;
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            margin-left: auto;
+            margin-right: auto;
+            z-index: 1; /* Place la carte sous le menu et le burger */
+        }
+
+        .pr{
+            margin: 20px;
+            text-align: center;
+            color: #979b76;
+            font-size: 2rem;
+        }
+    </style>
+    
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li>
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section>
+            <h2 class="pr">Découvrez où nos chefs se trouvent</h2>
+            <div id="map"></div>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        // Initialisation de la carte
+        const map = L.map('map', {
+            center: [48.8566, 2.3522], // Centré sur Paris
+            zoom: 11, // Zoom initial
+            minZoom: 7, // Zoom minimal
+            maxZoom: 20 // Zoom maximal
+        });
+
+        // Ajout des tuiles OpenStreetMap
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        // Liste des chefs avec leurs coordonnées et spécialités
+        const chefs = [
+            { name: "TAMILL Lakshmann", coords: [48.8566, 2.3522], specialties: "Cuisine indienne, italienne" },
+            { name: "ATIK Mahmoud", coords: [48.8610, 2.3310], specialties: "Cuisine arabe, française" },
+            { name: "TIAMZON Emmanuel", coords: [48.8666, 2.3218], specialties: "Cuisine asiatique, italienne, friture" }
+        ];
+
+        // Ajout des marqueurs pour chaque chef
+        chefs.forEach(chef => {
+            const marker = L.marker(chef.coords).addTo(map);
+            marker.bindPopup(`<b>${chef.name}</b><br>${chef.specialties}`);
+        });
+
+        // Gestion du bouton "Retour"
+        const backButton = document.getElementById('back-button');
+        if (backButton) {
+            backButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (window.history.length > 1) {
+                    window.history.back();
+                } else {
+                    window.location.href = "index.html";
+                }
+            });
+        }
+
+        // Gestion du menu burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const navMenu = document.querySelector('nav');
+
+        burgerMenu.addEventListener('click', () => {
+            navMenu.classList.toggle('open');
+            burgerMenu.classList.toggle('active');
+        });
+    // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/chef_atik.html b/SAE_WEB1/html/chef_atik.html
new file mode 100644
index 0000000..022a021
--- /dev/null
+++ b/SAE_WEB1/html/chef_atik.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chef Atik Mahmoud - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    
+    <style>
+        .chef-profile {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            padding: 20px;
+            background-color: #fff;
+            margin: 20px auto;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            max-width: 800px;
+        }
+
+        .chef-profile img {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-bottom: 20px;
+        }
+
+        .chef-profile h2 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: #a6aa7f;
+        }
+
+        .chef-profile p {
+            font-size: 1.2rem;
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        .chef-specialties {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            margin-bottom: 20px;
+        }
+
+        .specialty {
+            background-color: #F9A03F;
+            padding: 10px 20px;
+            border-radius: 5px;
+            color: #fff;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .contact-form {
+            max-width: 600px;
+            margin: 30px auto;
+            background-color: #fff;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .contact-form h2 {
+            color: #a6aa7f;
+            text-align: center;
+        }
+
+        .contact-form label {
+            display: block;
+            margin: 10px 0 5px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .contact-form input,
+        .contact-form textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .contact-form button {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #ffcc00;
+            color: #333;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .contact-form button:hover {
+            background-color: #e6b800;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav" id="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li>
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="chef-profile">
+            <img src="../img/atik_mahmoud.PNG" alt="Chef Atik Mahmoud">
+            <h2>Chef Atik Mahmoud</h2>
+            <p>Chef passionné par la cuisine arabe et française, Atik Mahmoud combine des saveurs authentiques et une créativité sans bornes dans ses plats. Son expertise lui permet de fusionner les cultures culinaires pour créer des expériences inoubliables.</p>
+
+            <div class="chef-specialties">
+                <div class="specialty">Cuisine arabe</div>
+                <div class="specialty">Cuisine française</div>
+            </div>
+        </section>
+
+        <section class="contact-form">
+            <h2>Contactez Chef Atik Mahmoud</h2>
+            <form action="#" method="POST">
+                <label for="name">Votre Nom</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Votre Email</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Votre Message</label>
+                <textarea id="message" name="message" rows="4" required></textarea>
+
+                <button type="submit">Envoyer</button>
+            </form>
+        </section>
+                
+        <div class="scroll-to-top" onclick="scrollToTop()">
+            <img src="../img/fleche.png" alt="Retour en haut"> 
+        </div>
+    </main>
+    
+
+        <div class="scroll-to-top" onclick="scrollToTop()">
+            <img src="../img/fleche.png" alt="Retour en haut"> 
+        </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+        <script>
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('header nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+                // Gestion du bouton "Retour"
+        const backButton = document.getElementById('back-button');
+        if (backButton) {
+            backButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (window.history.length > 1) {
+                    window.history.back();
+                } else {
+                    window.location.href = "index.html";
+                }
+            });
+        }
+
+
+        // Fonction pour revenir en haut de la page
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+    </body>
+    </html>
+
diff --git a/SAE_WEB1/html/chef_tamill.html b/SAE_WEB1/html/chef_tamill.html
new file mode 100644
index 0000000..f6cadb9
--- /dev/null
+++ b/SAE_WEB1/html/chef_tamill.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chef Tamill - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <style>
+        .chef-profile {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            padding: 20px;
+            background-color: #fff;
+            margin: 20px auto;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            max-width: 800px;
+        }
+
+        .chef-profile img {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-bottom: 20px;
+        }
+
+        .chef-profile h2 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: #a6aa7f;
+        }
+
+        .chef-profile p {
+            font-size: 1.2rem;
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        .chef-specialties {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            margin-bottom: 20px;
+        }
+
+        .specialty {
+            background-color: #F9A03F;
+            padding: 10px 20px;
+            border-radius: 5px;
+            color: #fff;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .contact-form {
+            max-width: 600px;
+            margin: 30px auto;
+            background-color: #fff;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .contact-form h2 {
+            color: #a6aa7f;
+            text-align: center;
+        }
+
+        .contact-form label {
+            display: block;
+            margin: 10px 0 5px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .contact-form input,
+        .contact-form textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .contact-form button {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #ffcc00;
+            color: #333;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .contact-form button:hover {
+            background-color: #e6b800;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav" id="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="chef-profile">
+            <img src="../img/tamill.PNG" alt="Chef Tamill">
+            <h2>Chef Tamill</h2>
+            <p>Chef passionné par la cuisine asiatique et fusion, Tamill crée des plats innovants qui allient les saveurs traditionnelles et modernes. Son expertise en cuisine asiatique, particulièrement le sushi, lui permet d'apporter une touche unique à chaque création.</p>
+
+            <div class="chef-specialties">
+                <div class="specialty">Cuisine asiatique</div>
+                <div class="specialty">Fusion moderne</div>
+            </div>
+        </section>
+
+        <section class="contact-form">
+            <h2>Contactez Chef Tamill</h2>
+            <form action="#" method="POST">
+                <label for="name">Votre Nom</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Votre Email</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Votre Message</label>
+                <textarea id="message" name="message" rows="4" required></textarea>
+
+                <button type="submit">Envoyer</button>
+            </form>
+        </section>
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('#main-nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/chef_tiamzon.html b/SAE_WEB1/html/chef_tiamzon.html
new file mode 100644
index 0000000..6565577
--- /dev/null
+++ b/SAE_WEB1/html/chef_tiamzon.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chef TIAMZON Emmanuel - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <style>
+        .chef-profile {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            padding: 20px;
+            background-color: #fff;
+            margin: 20px auto;
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            max-width: 800px;
+        }
+
+        .chef-profile img {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-bottom: 20px;
+        }
+
+        .chef-profile h2 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: #a6aa7f;
+        }
+
+        .chef-profile p {
+            font-size: 1.2rem;
+            color: #333;
+            margin-bottom: 20px;
+        }
+
+        .chef-specialties {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            margin-bottom: 20px;
+        }
+
+        .specialty {
+            background-color: #F9A03F;
+            padding: 10px 20px;
+            border-radius: 5px;
+            color: #fff;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .contact-form {
+            max-width: 600px;
+            margin: 30px auto;
+            background-color: #fff;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .contact-form h2 {
+            color: #a6aa7f;
+            text-align: center;
+        }
+
+        .contact-form label {
+            display: block;
+            margin: 10px 0 5px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .contact-form input,
+        .contact-form textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+
+        .contact-form button {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #ffcc00;
+            color: #333;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .contact-form button:hover {
+            background-color: #e6b800;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav" id="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="chef-profile">
+            <img src="../img/img_manu.jpg" alt="Chef TIAMZON Emmanuel">
+            <h2>Chef TIAMZON Emmanuel</h2>
+            <p>Chef passionné par la cuisine asiatique, italienne et la friture, Emmanuel TIAMZON est reconnu pour ses plats innovants qui mêlent tradition et modernité, créant des expériences culinaires inoubliables.</p>
+
+            <div class="chef-specialties">
+                <div class="specialty">Cuisine asiatique</div>
+                <div class="specialty">Cuisine Française</div>
+            </div>
+        </section>
+
+        <section class="contact-form">
+            <h2>Contactez Chef TIAMZON Emmanuel</h2>
+            <form action="#" method="POST">
+                <label for="name">Votre Nom</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Votre Email</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Votre Message</label>
+                <textarea id="message" name="message" rows="4" required></textarea>
+
+                <button type="submit">Envoyer</button>
+            </form>
+        </section>
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('#main-nav');  // Utilisation du bon sélecteur pour nav
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Code pour le lien "Retour" (ajustement de l'ID)
+        const backButton = document.querySelector('.back-button'); // Sélecteur corrigé
+
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault(); // Empêche le comportement par défaut du lien
+            window.history.back(); // Retour à la page précédente
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/connecter.html b/SAE_WEB1/html/connecter.html
new file mode 100644
index 0000000..a598b41
--- /dev/null
+++ b/SAE_WEB1/html/connecter.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/style_global.css">
+    <title>Se Connecter</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #f4f4f9;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        /* Style de l'en-tête */
+        header {
+            background-color: #F9A03F;
+            color: white;
+            padding: 20px 0;
+            text-align: center;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            position: relative;
+        }
+
+        header .logo {
+            display: flex;
+            justify-content: center;
+            transition: transform 0.3s ease;
+        }
+
+        header .logo img {
+            height: 100px;
+        }
+
+        /* Menu burger */
+        .burger-menu {
+            display: none;
+            flex-direction: column;
+            gap: 5px;
+            cursor: pointer;
+            padding: 15px;
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            z-index: 15;
+            background: none;
+            border: none;
+        }
+        .burger-menu span {
+            display: block;
+            width: 30px;
+            height: 3px;
+            background-color: #fff;
+            border-radius: 3px;
+        }
+
+        /* Menu de navigation sur mobile */
+        @media (max-width: 768px) {
+            nav {
+                display: none;
+                width: 100%;
+                background-color: #F9A03F;
+                position: fixed;
+                top: 80px;
+                left: 0;
+                z-index: 10;
+                text-align: center;
+                padding: 20px 0;
+            }
+
+            nav.open {
+                display: block;
+            }
+
+            .burger-menu {
+                display: flex;
+            }
+
+            header .logo {
+                justify-content: center; /* Centrer le logo quand le menu est ouvert */
+            }
+
+            nav ul {
+                flex-direction: column;
+            }
+
+            nav ul li a {
+                padding: 10px;
+                font-size: 16px;
+            }
+        }
+
+        .login-container {
+            margin: 30px auto 0; /* Ajout d'un espace de 20px en haut */
+            width: 100%;
+            max-width: 400px;
+            background: #ffffff;
+            padding: 20px 30px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .login-container h1 {
+            font-size: 24px;
+            color: #333;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        .login-container label {
+            display: block;
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #555;
+        }
+
+        .login-container input {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        .login-container button {
+            width: 100%;
+            padding: 10px;
+            background-color: #ffcc00;
+            color: #333;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .login-container button:hover {
+            background-color: #e6b800;
+        }
+
+        .login-container .register-link {
+            margin-top: 15px;
+            text-align: center;
+        }
+
+        .login-container .register-link a {
+            color: #007BFF;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .login-container .register-link a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 480px) {
+            .login-container {
+                padding: 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <a href="../index.html">
+                <img src="../img/logo_etoile&saveurs.png" alt="Logo du site">
+            </a>
+        </div>
+        <button class="burger-menu" aria-label="Ouvrir le menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div class="login-container">
+        <h1>Connexion</h1>
+            <label for="email">Adresse e-mail</label>
+            <input type="email" id="email" name="email" placeholder="Votre email" required>
+
+            <label for="password">Mot de passe</label>
+            <input type="password" id="password" name="password" placeholder="Votre mot de passe" required>
+
+            <button type="submit">Se connecter</button>
+        </form>
+        <div class="register-link">
+            <p>Pas encore inscrit ? <a href="inscription.html">Créer un compte</a></p>
+        </div>
+    </div>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+                // Fonction pour revenir en haut de la page
+                function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/cv_josue.html b/SAE_WEB1/html/cv_josue.html
new file mode 100644
index 0000000..6170c3b
--- /dev/null
+++ b/SAE_WEB1/html/cv_josue.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CV - Josué</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f9;
+            color: #333;
+        }
+
+        .container {
+            width: 80%;
+            margin: 20px auto;
+            background: #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        header {
+            background: #007acc;
+            color: white;
+            padding: 20px 15px;
+            text-align: center;
+        }
+
+        header h1 {
+            margin: 0;
+            font-size: 2rem;
+        }
+
+        header p {
+            margin: 5px 0 0;
+            font-size: 1rem;
+        }
+
+        section {
+            padding: 20px 15px;
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            color: #007acc;
+            margin-bottom: 10px;
+        }
+
+        .content {
+            margin-left: 15px;
+        }
+
+        ul {
+            list-style: none;
+            padding: 0;
+        }
+
+        ul li {
+            margin-bottom: 10px;
+        }
+
+        .skills span {
+            display: inline-block;
+            background: #007acc;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 20px;
+            margin: 5px 5px 0 0;
+        }
+
+        footer {
+            text-align: center;
+            background: #333;
+            color: white;
+            padding: 10px 0;
+            font-size: 0.9rem;
+        }
+
+        footer a {
+            color: #007acc;
+            text-decoration: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <a href="#" OnClick="javascript:window.print()">Imprimer</a>
+            <a href="index.html">Josué Konan</a>
+            <p> Route Hurbault | 0763732963 | jbtsko77@gmail.com</p>
+            <p><a href="https://www.linkedin.com/in/josu%C3%A9-konan-105569347/" style="color: #fff; text-decoration: underline;">LinkedIn</a></p>
+        </header>
+
+        <section>
+            <h2 class="section-title">Profil</h2>
+            <p>Étudiant motivé et passionné en première année de BUT Informatique. Compétent en programmation et développement web, avec une solide maîtrise de plusieurs langages. Dynamique et curieux, je combine mes compétences techniques avec des qualités interpersonnelles et un goût prononcé pour les nouvelles technologies.</p>
+        </section>
+
+        <section>
+            <h2 class="section-title">Formation</h2>
+            <div class="content">
+                <ul>
+                    <li><strong>BUT Informatique</strong> – IUT Sénart site de Fontainebleau (2023 - Présent)</li>
+                    <li><strong>Baccalauréat Scientifique</strong> – Lycée La Mare Carrée (2023) -</li>
+                </ul>
+            </div>
+        </section>
+
+        <section>
+            <h2 class="section-title">Compétences Techniques</h2>
+            <div class="skills">
+                <span>C</span> <span>C++</span> <span>Python</span> <span>HTML</span> <span>CSS</span>
+                <span>Git</span> <span>Visual Studio Code</span> <span>Anglais (courant)</span>
+            </div>
+        </section>
+
+        <section>
+            <h2 class="section-title">Expériences</h2>
+            <div class="content">
+                <ul>
+                    <li><strong>Projet étudiant :</strong> Développement d’un jeu vidéo en Python (2024)</li>
+                    <li><strong>Stage d’observation :</strong> Initiation à la gestion de bases de données et développement de scripts (2023)</li>
+                </ul>
+            </div>
+        </section>
+
+        <section>
+            <h2 class="section-title">Centres d’Intérêt</h2>
+            <div class="content">
+                <ul>
+                    <li>Football (pratique régulière, travail d’équipe)</li>
+                    <li>Jeux vidéo (game design, optimisation des performances)</li>
+                    <li>Technologies (veille sur les nouveautés en programmation et IA)</li>
+                </ul>
+            </div>
+        </section>
+
+        <footer>
+            <p>Créé par Konan </p>
+        </footer>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/SAE_WEB1/html/cv_manu.html b/SAE_WEB1/html/cv_manu.html
new file mode 100644
index 0000000..11cdbd4
--- /dev/null
+++ b/SAE_WEB1/html/cv_manu.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CV Emmanuel TIAMZON</title>
+<meta charset="UTF-8">
+<link rel="stylesheet" type="text/css" href="../css/style_cv_manu.css" />
+
+</head>
+<body>
+<a href="#" OnClick="javascript:window.print()">Imprimer</a>
+<div class="cote_gauche">
+
+<img src="../img/img_manu.jpg" alt="Photo pour CV" width="175" height="240" class="photo_me">
+
+<h3 class="contact">Contact</h3>
+<ul>
+    <li>Linkedin : <a href="https://www.linkedin.com/in/emmanuel-srivastava-tiamzon-4b9238318?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app">Emmanuel TIAMZON</a></li>
+    <li><a href="tel:+33695752354">06 95 75 23 54</a></li>
+    <li><a href="mailto:emmanuel_ts@yahoo.com">emmanuel_ts@yahoo.com</a></li>
+    <li>93 Avenue Rouget de Lisle</br>94400 <a href="autre.php">Vitry-sur-Seine</a></li>
+</ul> 
+
+<h3 class="competences">Compétences</h3>
+<ul>
+    <li>Création de site web avec</br>
+    HTML/CSS/JavaScript</li>
+    <li>Langages de programmation : Python, SQL89/SQL92, C, HTML, CSS, JavaScript, Bash</li>
+    <li>Pack office</li>
+    <li>Logiciels de montage vidéo et photo : Filmora, Power Director 365, Capcut et Photoroom</li>
+    <li>Logiciel de modélisation et d'animation en 3D : Blender 4.2</li>
+</ul>
+
+<h3 class="langues">Langues</h3>
+<ul>
+    <li>Anglais niveau <b>C1</b></li>
+    <li>Allemand niveau <b>A2</b></li>
+    <li>Espagnol niveau <b>A1</b></li>
+</ul>
+
+<h3 class="centre_interet">Centre d'intérêts</h3>
+<ul>
+    <li>Photographie :</br>Passionné depuis 3 ans, comissioné à un compte instagram amateur du lycée Adolphe Chérioux.</li>
+    <li>Cinéma :</br>Avec plus de 5 personnes j’ai été monteur, acteur et aidé à écrire et réaliser un court métrage amateur, burlesque.</li>
+    <li>Lecture :</br>Pièce de théâtre, Manga, roman, livre religieux.</li>
+    <li>Musculation :</br>Pratique depuis 2022.</li>
+    <li>Échecs :</br>Inscrit pendant 2 ans à un club d'échec lors de ma primaire.</li>
+</ul>
+
+</div>
+
+<div class="myname">
+<h2>Emmanuel TIAMZON</h2>
+
+<p >
+    Etudiant en BUT informatique à Fontainebleau,</br>
+    positif, discipliné et ayant le sens du détail,</br>
+    recherche une alternance sur le rythme de trois semaine </br> 
+    en entreprise puis trois semaine en initial,</br> 
+    à partir de septembre 2025.
+</p>
+</div>
+
+<div class="formation">
+    <h2 class="for-titre">FORMATION</h2>
+
+    <h3>BUT Informatique    2024/2027</h3>
+    <p>UPEC - IUT de Fontainebleau, Seine-et-Marne, 77186</p>
+    <ul>
+        <li>Inscrit via Parcoursup le septembre 2024</li>
+        <li>Matières : Développement, Réseau, Economie, Communication, Anglais, Mathématiques</li>
+    </ul>
+
+    <h3>Baccalauréat Général    2021/2024</h3>
+    <p>Lycée Polyvalent Adolphe Chérioux, Vitry-sur-Seine, 94400</p>
+    <ul>
+        <li>Année d’obtention : 2024</li>
+        <li>Spécialités : Mathématiques, Numérique et Sciences de l’informatique</li>
+    </ul>
+
+    <h3>Diplôme National du Brevet  2021</h3>
+    <p>Collège, Vitry-sur-Seine, 94400</p>
+    <ul>
+        <li>Année d’obtention : 2021</li>
+        <li>Mention : Assez bien</li>
+    </ul>
+</div>
+
+<div class="exp_pro">
+    <h2 class="exp-titre">EXPERIENCES PROFESSIONNELLES</h2>
+
+    <h3>BIOCOOP | Hôte d'accueil/standardiste</h3>
+    <p>Siège social de BIOCOOP, 75116 Paris</br>
+        Mission d’intérim</br>
+        Période : 05/08 - 14/08
+    </p>
+    <ul>
+        <li>Accueil physique et orientation des visiteurs (clients, fournisseurs, partenaires) avec courtoisie et professionnalisme.</li>
+        <li>Gestion du standard téléphonique : prise de messages, redirection des appels vers les différents services, gestion des priorités.</li>
+        <li>Gestion de la réception et distribution du courrier ainsi que des colis entrants.</li>
+    </ul>
+
+    <h3>FIRST OPTIC | Stage d’observation</h3>
+    <p>First Optic, 75011 Paris</br>
+        Période : 08/02 - 12/02
+    </p>
+    <ul>
+        <li>Assisté aux ventes en magasin et guidé les clients dans leurs achats, offrant des conseils et des informations sur les produits.</li>
+        <li>Organisation de commande en tant qu’assistant pour clients</li>
+    </ul>
+</div>
+
+<div class="projets-info">
+    <h2 class="proj-titre">PROJETS INFORMATIQUE</h2>
+
+    <h4>Situation d'Apprentissage et d'Évaluation pour le jeu Blokus    2024</h4>
+    <p>En binôme j’ai codé en C, à l’aide d’une bibliothèque graphique le jeu de plateforme et de stratégie “Blokus”, avec plusieurs fichiers interconnectés</p>
+
+    <h4>Situation d'Apprentissage et d'Évaluation pour un dual boot     2024</h4>
+    <p>Sur machine virtuelle avec Linux, j’ai partitionné un disque, installé Windows et Arch linux. 
+        Pour ensuite créer un menu dual boot. 
+        Je devais me mettre en situation d’entreprise et créer une notice d’installation professionnelle, tout en créeant une notice d’installation</p>
+
+    <h4>Situation d'Apprentissage et d'Évaluation pour un site web pour une entreprise     2024</h4>
+    <p>Avec les languages de programmation HTML, CSS et JavaScript, en trinôme nous avons développé une entreprise et un site web</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/SAE_WEB1/html/cv_wael.html b/SAE_WEB1/html/cv_wael.html
new file mode 100644
index 0000000..825f979
--- /dev/null
+++ b/SAE_WEB1/html/cv_wael.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="../css/style_cv_wael.css" />
+    <title>CV - Wael ATIK</title>
+</head>
+<body>
+
+    <div class="cv-container">
+        <div class="sidebar">
+            <img src="../img/wael.PNG" alt="Photo de Wael ATIK">
+            <h2>Contact</h2>
+            <ul>
+                <li><a href="https://www.linkedin.com/in/wael-atik-657289256" target="_blank">Linkedin</a></li>
+                <li>07 80 37 11 57</li>
+                <li><a href="mailto:wael.atik.07@gmail.com">wael.atik.07@gmail.com</a></li>
+                <li>21 avenue du 11 novembre 1918, 94400 Vitry-sur-Seine</li>
+            </ul>
+
+            <h3>Informatique</h3>
+            <div class="skills-container">
+                <div class="skills-list">
+                    <ul>
+                        <li>Python</li>
+                        <li>BASH</li>
+                        <li>HTML/CSS</li>
+                        <li>Excel</li>
+                    </ul>
+                </div>
+                <div class="skills-list">
+                    <ul>
+                        <li>SQL</li>
+                        <li>Langage C</li>
+                        <li>Javascript</li>
+                        <li>PowerPoint</li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="section">
+                <h3>Centres d’intérêt</h3>
+                <ul>
+                    <strong>Sports</strong>
+                    <ul>
+                        <li>Jiu jitsu brésilien : Champion régional 2024 des -71kg</li>
+                        <li>Boxe anglaise : Vice-champion de France 2022 des -66kg</li>
+                    </ul>
+                    <strong>Charité</strong>
+                    <ul>
+                        <li>Vice-président de UneActionUnespoir avec à son actif 150 membres</li>
+                    </ul>
+                    <strong>Langues</strong>
+                    <ul>
+                        <li>Anglais : B2</li>
+                        <li>Espagnol : A2</li>
+                    </ul>
+                </ul>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="title-container">
+                
+                <a href="index.html">Wael ATIK</a>
+                <a href="#" OnClick="javascript:window.print()">Imprimer</a>
+            </div>
+            <div class="description">
+                <p>Etudiant en But Informatique, discipliné, sociable et curieux, recherche une alternance sur le rythme 3s/3s à partir de septembre 2025.</p>
+            </div>
+
+            <div class="section">
+                <h3>Formation</h3>
+
+                <p><strong>2024/2027</strong> - BUT Informatique<br>Institut Universitaire de Technologie Fontainebleau</p>
+                <ul>
+                    <li><strong>DEV :</strong> Apprentissage du langage C et création d’un mini-jeu</li>
+                    <li><strong>SCR :</strong> Apprentissage du BASH et création d’une machine virtuelle</li>
+                </ul>
+                <br>
+                <br>
+                <p><strong>2023/2024</strong> - Baccalauréat Général<br>Lycée Adolphe Chérioux, Vitry-Sur-Seine</p>
+                <ul>
+                    <li><strong>SI :</strong> Programmation en C, en Arduino et création d’un projet ROBOT</li>
+                    <li><strong>NSI :</strong> Programmation en Python et création d’un jeu type Street Fighter</li>
+                </ul>
+            </div>
+
+            <div class="section">
+                <h3>Expérience</h3>
+                <p><strong>2021-2024</strong> - Garde d’enfants</p>
+                <ul>
+                    <li>Surveillance et sécurité : Assurer un environnement sécurisé pour les enfants, en veillant à ce qu'ils ne soient pas en danger.</li>
+                    <li>Gestion d’un foyer avec une prise en charge des tâches ménagères.</li>
+                    <li>Communication : Discuter des attentes des parents concernant les horaires, les repas, les activités, et les règles à suivre pour assurer une garde cohérente.</li>
+                    <li>Aide aux devoirs : Du niveau CP à Terminale</li>
+                </ul>
+                <br>
+                <br>
+
+                <p><strong>2020</strong> - Stage d’observation au Cabinet dentaire Dentotop Ivry-sur-Seine</p>
+                <ul>
+                    <li>Gestion des rendez-vous : Observation de la prise de rendez-vous et gestion du planning des consultations.</li>
+                    <li>Accueil des patients : Accueil des patients, enregistrement de leurs informations, et orientation vers la salle de soin.</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+<script>
+</script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/disponibilite.html b/SAE_WEB1/html/disponibilite.html
new file mode 100644
index 0000000..24d3e42
--- /dev/null
+++ b/SAE_WEB1/html/disponibilite.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Disponibilité des Chefs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="../css/style_disponibilite.css">
+</head>
+<body>
+
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="Étoiles & Saveurs" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li>
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+        <main>
+            <div class="calendar-container">
+                <h2>Choisissez une date pour voir la disponibilité</h2>
+                <div class="calendar-navigation">
+                    <span id="prev-month" class="arrow">&#9664;</span>
+                    <span id="calendar-title"></span>
+                    <span id="next-month" class="arrow">&#9654;</span>
+                </div>
+                <div id="calendar"></div>
+                <!-- Zone de réservation dans le HTML -->
+                <div id="reservation-form" class="reservation-form" style="display: none;">
+                    <p id="reservation-date" style="font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center;"></p>
+                    <label for="chef-select">Choisissez un chef :</label>
+                    <select id="chef-select">
+                        <option value="" disabled selected>-- Sélectionner un chef --</option>
+                        <option value="Emmanuel">Emmanuel</option>
+                        <option value="Mahmoud">Mahmoud</option>
+                        <option value="Lakshmann">Lakshmann</option>
+                    </select>
+                    <br>
+                    
+                    <label for="reserver-nom">Nom de la personne réservant :</label>
+                    <input type="text" id="reserver-nom" placeholder="Votre nom">
+                    
+                    <button onclick="confirmReservation()">Confirmer la réservation</button>
+                    <button onclick="closeReservationForm()">Annuler</button>
+                </div>
+
+                </div>
+            </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2025 Étoiles & Saveurs - Tous droits réservés</p>
+    </footer>
+    <script>
+document.addEventListener("DOMContentLoaded", function () {
+    // Déclaration des éléments DOM
+    const calendarElement = document.getElementById('calendar');
+    const calendarTitle = document.getElementById('calendar-title');
+    const reservationForm = document.getElementById('reservation-form');
+    const reservationDateElem = document.getElementById('reservation-date');
+    const chefSelect = document.getElementById('chef-select');
+    const reserverNom = document.getElementById('reserver-nom');
+    const prevMonthArrow = document.getElementById('prev-month');
+    const nextMonthArrow = document.getElementById('next-month');
+
+    let reservedDates = []; // Contient les dates réservées
+    let selectedCell = null; // Cellule sélectionnée dans le calendrier
+    let currentDate = new Date();
+    let currentMonth = currentDate.getMonth();
+    let currentYear = currentDate.getFullYear();
+
+    // Fonction pour afficher le calendrier
+    function renderCalendar(month, year) {
+        const months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
+        const daysOfWeek = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
+
+        calendarTitle.textContent = `${months[month]} ${year}`;
+
+        let table = `<table><thead><tr>`;
+        daysOfWeek.forEach(day => {
+            table += `<th>${day}</th>`;
+        });
+        table += `</tr></thead><tbody>`;
+
+        const firstDay = new Date(year, month, 1).getDay();
+        const lastDate = new Date(year, month + 1, 0).getDate();
+
+        let day = 1;
+        for (let row = 0; row < 6; row++) {
+            table += "<tr>";
+            for (let col = 0; col < 7; col++) {
+                if (row === 0 && col < firstDay) {
+                    table += "<td></td>";
+                } else if (day > lastDate) {
+                    table += "<td></td>";
+                } else {
+                    const dateStr = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+                    const reservation = reservedDates.find(reserved => reserved.date === dateStr);
+
+                    const isReservedMidi = reservation && reservation.midi;
+                    const isReservedSoir = reservation && reservation.soir;
+
+                    table += `<td class="date-cell">
+                                <div class="midi ${isReservedMidi ? 'reserved' : ''}" onclick="reserveDate('${dateStr}', 'midi', this)">Midi</div>
+                                <div class="soir ${isReservedSoir ? 'reserved' : ''}" onclick="reserveDate('${dateStr}', 'soir', this)">Soir</div>
+                            </td>`;
+                    day++;
+                }
+            }
+            table += "</tr>";
+            if (day > lastDate) break;
+        }
+
+        table += `</tbody></table>`;
+        calendarElement.innerHTML = table;
+    }
+
+    // Fonction pour réserver une date (midi ou soir)
+    window.reserveDate = function (dateStr, partOfDay, element) {
+    const div = element;
+    if (div.classList.contains('reserved')) {
+        // Récupérer la réservation existante pour afficher l'alerte
+        const reservation = reservedDates.find(reserved => reserved.date === dateStr);
+        const reserverName = reservation ? reservation.reserver : 'Inconnu';
+        const chefName = reservation ? reservation.chef : 'Inconnu';
+
+        alert(`Cette partie du ${partOfDay} est déjà réservée par ${reserverName} avec le chef ${chefName}.`);
+        return;
+    }
+
+    // Libérer la cellule précédente si une autre est sélectionnée
+    if (selectedCell) {
+        selectedCell.classList.remove('selected');
+    }
+
+    // Sélectionner la cellule actuelle
+    element.classList.add('selected');
+    selectedCell = element;
+
+    // Afficher les informations de réservation
+    reservationDateElem.textContent = `Vous avez sélectionné ${dateStr} - ${partOfDay}`;
+    reservationForm.style.display = 'block';
+    chefSelect.value = '';
+    reserverNom.value = '';
+    reservationForm.dataset.selectedDate = dateStr;
+    reservationForm.dataset.partOfDay = partOfDay;
+};
+
+
+    // Fonction pour confirmer la réservation
+    window.confirmReservation = function () {
+        const selectedDate = reservationForm.dataset.selectedDate;
+        const partOfDay = reservationForm.dataset.partOfDay;
+        const chefName = chefSelect.value;
+        const reserverName = reserverNom.value;
+
+        if (!chefName || !reserverName) {
+            alert('Veuillez sélectionner un chef et entrer un nom.');
+            return;
+        }
+
+        // Vérifier si la date est déjà réservée
+        const reservationIndex = reservedDates.findIndex(reserved => reserved.date === selectedDate);
+
+        if (reservationIndex === -1) {
+            // Créer une nouvelle réservation si la date n'est pas encore réservée
+            let newReservation = { date: selectedDate, chef: chefName, reserver: reserverName };
+            newReservation[partOfDay] = true;
+            reservedDates.push(newReservation);
+        } else {
+            // Mettre à jour la réservation existante
+            reservedDates[reservationIndex][partOfDay] = true;
+            reservedDates[reservationIndex].chef = chefName;
+            reservedDates[reservationIndex].reserver = reserverName;
+        }
+
+        // Cacher le formulaire et réafficher le calendrier
+        reservationForm.style.display = 'none';
+        renderCalendar(currentMonth, currentYear);
+    };
+
+    // Fonction pour fermer le formulaire de réservation
+    window.closeReservationForm = function () {
+        reservationForm.style.display = 'none';
+        if (selectedCell) {
+            selectedCell.classList.remove('selected');
+            selectedCell = null;
+        }
+    };
+
+    // Gestion des flèches pour naviguer entre les mois
+    prevMonthArrow.addEventListener('click', function () {
+        currentMonth--;
+        if (currentMonth < 0) {
+            currentMonth = 11;
+            currentYear--;
+        }
+        renderCalendar(currentMonth, currentYear);
+    });
+
+    nextMonthArrow.addEventListener('click', function () {
+        currentMonth++;
+        if (currentMonth > 11) {
+            currentMonth = 0;
+            currentYear++;
+        }
+        renderCalendar(currentMonth, currentYear);
+    });
+
+    // Initialiser le calendrier
+    renderCalendar(currentMonth, currentYear);
+
+    // Code pour le bouton burger (menu mobile)
+    const burgerMenu = document.querySelector('.burger-menu');
+    const nav = document.querySelector('header nav');
+
+    burgerMenu.addEventListener('click', () => {
+        nav.classList.toggle('open');
+    });
+
+    // Gérer le redimensionnement pour fermer le menu burger sur grand écran
+    window.addEventListener('resize', () => {
+        if (window.innerWidth > 768) {
+            nav.classList.remove('open');
+        }
+    });
+
+    // Gestion du bouton "Retour"
+    const backButton = document.getElementById('back-button');
+    if (backButton) {
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (window.history.length > 1) {
+                window.history.back();
+            } else {
+                window.location.href = "index.html";
+            }
+        });
+    }
+});
+
+        // Fonction pour revenir en haut de la page
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/inscription.html b/SAE_WEB1/html/inscription.html
new file mode 100644
index 0000000..366aa98
--- /dev/null
+++ b/SAE_WEB1/html/inscription.html
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/style_global.css">
+    <title>Inscription</title>
+    <style>
+            body {
+                font-family: 'Arial', sans-serif;
+                background-color: #f4f4f9;
+                color: #333;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: flex-start;
+                min-height: 100vh;
+                overflow-x: hidden; /* Empêche les débordements horizontaux */
+
+                background: url("../img/background.jpg");
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-attachment: fixed;
+            }
+
+
+
+            /* Style de l'en-tête */
+            header {
+                background-color: #F9A03F;
+                color: white;
+                padding: 20px 0;
+                text-align: center;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                width: 100%;
+                position: relative; /* Ajouté pour éviter tout décalage */
+            }
+            
+            header .logo {
+                display: flex;
+                justify-content: center;
+            }
+
+            header .logo img {
+                height: 100px;
+            }
+
+            /* Menu burger */
+            .burger-menu {
+                display: none;
+                flex-direction: column;
+                gap: 5px;
+                cursor: pointer;
+                padding: 15px;
+                position: absolute;
+                top: 15px;
+                z-index: 15; /* Toujours au-dessus du contenu */
+                background: none; /* Pas de fond */
+                border: none; /* Pas de bordure */
+            }
+            .burger-menu span {
+                display: block;
+                width: 30px;
+                height: 3px;
+                background-color: #fff;
+                border-radius: 3px;
+            }
+
+            /* Menu de navigation (sur mobile seulement) */
+            @media (max-width: 768px) {
+                nav {
+                    display: none; /* Masquer le menu par défaut */
+                    width: 100%;
+                    background-color: #F9A03F;
+                    position: fixed; /* Position fixe pour qu'il reste sous l'en-tête */
+                    top: 80px; /* Laisser de l'espace sous l'en-tête */
+                    left: 0;
+                    z-index: 10;
+                    text-align: center;
+                    padding: 20px 0;
+                }
+
+                nav.open {
+                    display: block; /* Afficher le menu quand 'open' est ajouté */
+                }
+
+                .burger-menu {
+                    display: flex;
+                }
+
+                nav ul {
+                    flex-direction: column;
+                }
+
+                nav ul li a {
+                    padding: 10px;
+                    font-size: 16px;
+                }
+            }
+
+
+        /* Styles pour le conteneur principal */
+        .signup-container {
+            width: 100%;
+            max-width: 400px;
+            background: #ffffff;
+            padding: 20px 30px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin: 80px auto;
+        }
+
+        .signup-container h1 {
+            font-size: 24px;
+            color: #333;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        .signup-container label {
+            display: block;
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #555;
+        }
+
+        .signup-container input {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        .signup-container button {
+            width: 100%;
+            padding: 10px;
+            background-color: #ffcc00;
+            color: #333;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .signup-container button:hover {
+            background-color: #e6b800;
+        }
+
+        .signup-container .login-link {
+            margin-top: 15px;
+            text-align: center;
+        }
+
+        .signup-container .login-link a {
+            color: #007BFF;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .signup-container .login-link a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 480px) {
+            .signup-container {
+                padding: 15px;
+            }
+
+            nav ul {
+                flex-direction: column;
+                gap: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- En-tête avec logo et menu -->
+<header>
+    <div class="logo">
+        <a href="../index.html">
+            <img src="../img/logo_etoile&saveurs.png" alt="Logo du site">
+        </a>
+    </div>
+    <button class="burger-menu" aria-label="Ouvrir le menu">
+        <span></span>
+        <span></span>
+        <span></span>
+    </button>
+    <nav>
+        <ul>
+            <li><a href="../index.html">Accueil</a></li>
+            <li><a href="apropos.html">Qui sommes-nous</a></li>
+            <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+            <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+            <li><a href="disponibilite.html">Disponibilité</a></li>
+            <li><a href="page_contact.html">Contact</a></li>
+            <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+        </ul>
+    </nav>
+</header>
+
+
+    <!-- Contenu principal -->
+    <div class="signup-container">
+        <h1>Inscription</h1>
+            <label for="prenom">Prénom</label>
+            <input type="text" id="prenom" name="prenom" placeholder="Votre prénom" required>
+
+            <label for="nom">Nom</label>
+            <input type="text" id="nom" name="nom" placeholder="Votre nom" required>
+
+            <label for="email">Adresse e-mail</label>
+            <input type="email" id="email" name="email" placeholder="Votre email" required>
+
+            <label for="phone">Numéro de téléphone</label>
+            <input type="tel" id="phone" name="phone" placeholder="Votre numéro de téléphone" pattern="[0-9]{10}" required>
+
+            <label for="password">Mot de passe</label>
+            <input type="password" id="password" name="password" placeholder="Votre mot de passe" required>
+
+            <label for="confirm-password">Confirmer le mot de passe</label>
+            <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirmez votre mot de passe" required>
+
+            <button type="submit">S'inscrire</button>
+        </form>
+        <div class="login-link">
+            <p>Déjà un compte ? <a href="connecter.html">Se connecter</a></p>
+        </div>
+    </div>
+    
+
+    
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('header nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Fonction pour revenir en haut de la page
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/page_contact.html b/SAE_WEB1/html/page_contact.html
new file mode 100644
index 0000000..107a39f
--- /dev/null
+++ b/SAE_WEB1/html/page_contact.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="../css/style_contact.css">
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="#" id="back-button">Retour</a></li> <!-- Lien dynamique pour "Retour" -->
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="contact-form">
+            <h2>Formulaire de contact</h2>
+            <form>
+                <label for="name">Nom :</label>
+                <input type="text" id="name" name="name" required>
+                
+                <label for="email">Email :</label>
+                <input type="email" id="email" name="email" required>
+                
+                <label for="message">Message :</label>
+                <textarea id="message" name="message" required></textarea>
+                
+                <button type="submit">Envoyer</button>
+            </form>
+        </section>
+        
+
+        
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+    
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('header nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Code pour le lien "Retour"
+        const backButton = document.getElementById('back-button');
+
+        // Utiliser l'historique du navigateur pour revenir à la page précédente
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault(); // Empêche le comportement par défaut du lien
+            window.history.back(); // Retour à la page précédente
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/page_recettes.html b/SAE_WEB1/html/page_recettes.html
new file mode 100644
index 0000000..91e8cfb
--- /dev/null
+++ b/SAE_WEB1/html/page_recettes.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nos Chefs - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="../css/style_recettes.css">
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Lien ajouté pour "Carte des Chefs" -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="#" id="back-button">Retour</a></li> <!-- Lien dynamique pour "Retour" -->
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        
+        <section class="chefs">
+            <h2>Découvrez nos chefs</h2>
+            <article class="chef">
+                <a href="chef_tamill.html">
+                    <h3>TAMILL Lakshmann</h3>
+                    <p>Spécialités : Cuisine indienne</p>
+                    <p>⭐⭐⭐⭐⭐</p>
+                    <p>Spécialités : Cuisine italienne</p>
+                    <p>⭐⭐</p>
+                    <p>Prix moyen : 50 €/personne</p>
+                </a>
+            </article>
+            <article class="chef">
+                <a href="chef_atik.html">
+                    <h3>ATIK Mahmoud</h3>
+                    <p>Spécialités : Cuisine arabe</p>
+                    <p>⭐⭐⭐⭐⭐</p>
+                    <p>Spécialités : Cuisine Française</p>
+                    <p>⭐⭐⭐</p>
+                    <p>Prix moyen : 40 €/personne</p>
+                </a>
+            </article>
+            <article class="chef">
+                <a href="chef_tiamzon.html">
+                    <h3>TIAMZON Emmanuel</h3>
+                    <p>Spécialités : Cuisine asiatique</p>
+                    <p>⭐⭐⭐⭐⭐</p>
+                    <p>Spécialités : Cuisine Française</p>
+                    <p>⭐⭐⭐</p>
+                    <p>Prix moyen : 75 €/personne</p>
+                </a>
+            </article>
+        </section>
+
+        
+        <section class="recettes">
+            <h2>Nos recettes :</h2>
+            
+            <article class="recette">
+                <a href="recette-sauce_forestiere.html">
+                    <h4>Sauce forestière au poulet sur son lit de riz</h4>
+                    <img src="../img/img-sauce-forestiere.jpg" alt="Sauce Forestière">
+                    <p>Cette recette, assez facile à faire, est parfaite pour vous réchauffer pendant l'hiver.</p>
+                    <p>Le mélange entre le riz et la sauce champignon nous rappelle certains classiques français, mais le poulet est là pour rappeler le réconfort dû à son bas prix surtout en ces fins d'années.</p>
+                </a>
+            </article>
+        
+            <article class="recette">
+                <a href="recette-riz_cantonnais.html">
+                    <h4>Riz Cantonais</h4>
+                    <img src="../img/riz-cantonais.jpg" alt="Riz Cantonais">
+                    <p>Un classique de la cuisine chinoise, facile et rapide à préparer, avec un mélange parfait de riz, légumes, œufs et jambon.</p>
+                    <p>Idéal pour un repas en famille ou entre amis, ce riz cantonais saura ravir vos papilles avec ses saveurs équilibrées et sa touche de sauce soja.</p>
+                </a>
+            </article>
+        
+            <article class="recette">
+                <a href="recette-brick.html">
+                    <h4>Bricks Farcies</h4>
+                    <img src="../img/brick.png" alt="Bricks Farcies">
+                    <p>Les bricks sont une spécialité algerienne, délicieuses et faciles à préparer. Farcies de viande hachée, d'œufs et d'épices, elles sont parfaites pour un repas léger ou en apéritif.</p>
+                    <p>Fries jusqu'à obtenir une belle couleur dorée et croustillante, elles sont un véritable régal pour les papilles.</p>
+                </a>
+            </article>
+        
+        </section>
+        
+        
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+        <p>Conception par <span>Isagi</span>.</p>
+    </footer>
+
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('header nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Code pour le lien "Retour"
+        const backButton = document.getElementById('back-button');
+
+        // Utiliser l'historique du navigateur pour revenir à la page précédente
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault(); // Empêche le comportement par défaut du lien
+            window.history.back(); // Retour à la page précédente
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/recette-brick.html b/SAE_WEB1/html/recette-brick.html
new file mode 100644
index 0000000..3e1323f
--- /dev/null
+++ b/SAE_WEB1/html/recette-brick.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recette Bricks - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="../css/style_recettes-global.css">
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav" id="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="recette">
+            <h2>Bricks Farcies</h2>
+            <img src="../img/brick.png" alt="Bricks Farcies">
+            
+            <p>
+                Les bricks sont une spécialité de la cuisine algérienne, délicieuses et simples à réaliser. 
+                Elles peuvent être garnies de diverses façons, avec de la viande hachée, des légumes ou de la viande.
+                Découvrez notre recette de bricks farcies pour un repas savoureux et rapide.
+            </p>
+            <p>Avant de commencer, vérifiez d'avoir les bons ingrédients : </p>
+           
+            <ul class="list-ingredient">
+                <li>6 feuilles de brick</li>
+                <li>200g de viande hachée</li>
+                <li>2 œufs</li>
+                <li>1 oignon haché</li>
+                <li>1 cuillère à soupe de persil frais haché</li>
+                <li>Sel et poivre</li>
+                <li>Huile pour la friture</li>
+            </ul>
+        </section>
+
+        <!-- Étapes de la recette -->
+        <section class="etapes-recette">
+            <h2>Étapes de préparation</h2>
+            <ol>
+                <li>Dans un bol, mélangez la viande hachée, l'oignon haché, le persil, les œufs, le sel et le poivre.</li>
+                <li>Sur chaque feuille de brick, déposez une cuillère de farce et repliez-la pour former un triangle ou un rouleau.</li>
+                <li>Faites chauffer l'huile dans une poêle et faites frire les bricks jusqu'à ce qu'elles soient dorées et croustillantes des deux côtés.</li>
+                <li>Égouttez les bricks sur du papier absorbant pour enlever l'excès d'huile.</li>
+                <li>Servez chaud, accompagné d'une salade ou de chorba.</li>
+            </ol>
+        </section>
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('#main-nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Code pour le lien "Retour"
+        const backButton = document.querySelector('.back-button');
+
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.history.back();
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/recette-riz_cantonnais.html b/SAE_WEB1/html/recette-riz_cantonnais.html
new file mode 100644
index 0000000..0548e8c
--- /dev/null
+++ b/SAE_WEB1/html/recette-riz_cantonnais.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recette Riz Cantonais - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="../css/style_recettes-global.css">
+</head>
+<body>
+    <header>
+        <a href="../index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav" id="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="recette">
+            <h2>Riz Cantonais</h2>
+            <img src="../img/riz-cantonais.jpg" alt="Riz Cantonais">
+            
+            <p>
+                Le riz cantonais est un plat emblématique de la cuisine chinoise. Il est riche en saveurs et composé de riz, légumes, œufs et viande.
+                Découvrez la recette complète pour réaliser ce délicieux plat à la maison.
+            </p>
+            <p>Avant de commencer, vérifiez d'avoir les bons ingrédients : </p>
+           
+            <ul class="list-ingredient">
+                <li>Riz cuit (idéalement de la veille)</li>
+                <li>200g de petits pois</li>
+                <li>2 œufs</li>
+                <li>100g de jambon coupé en dés</li>
+                <li>1 oignon vert</li>
+                <li>Sauce soja</li>
+                <li>Huile de sésame ou huile d'olive</li>
+                <li>Sel et poivre</li>
+                <li>Garniture facultative : crevettes ou poulet</li>
+            </ul>
+        </section>
+
+        <!-- Étapes de la recette -->
+        <section class="etapes-recette">
+            <h2>Étapes de préparation</h2>
+            <ol>
+                <li>Faites cuire les petits pois dans de l'eau bouillante pendant 2-3 minutes, puis égouttez-les.</li>
+                <li>Dans une poêle ou un wok, faites chauffer un peu d'huile de sésame et faites cuire les œufs brouillés. Réservez.</li>
+                <li>Dans la même poêle, ajoutez un peu d'huile et faites revenir l'oignon vert haché.</li>
+                <li>Ajoutez le jambon et faites-le dorer légèrement.</li>
+                <li>Incorporez le riz cuit et faites-le sauter en remuant pendant quelques minutes.</li>
+                <li>Ajoutez les petits pois, les œufs brouillés et, si vous le souhaitez, des crevettes ou du poulet.</li>
+                <li>Assaisonnez avec la sauce soja, le sel et le poivre, et continuez à faire sauter le tout pendant quelques minutes.</li>
+                <li>Servez chaud et dégustez avec une sauce soja supplémentaire si désiré.</li>
+            </ol>
+        </section>
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('#main-nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Code pour le lien "Retour"
+        const backButton = document.querySelector('.back-button');
+
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.history.back();
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/html/recette-sauce_forestiere.html b/SAE_WEB1/html/recette-sauce_forestiere.html
new file mode 100644
index 0000000..622324a
--- /dev/null
+++ b/SAE_WEB1/html/recette-sauce_forestiere.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recette Sauce Forestière - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="../css/style_global.css">
+    <link rel="stylesheet" href="../css/style_recettes-global.css">
+</head>
+<body>
+    <header>
+        <a href="index.html"><img src="../img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-nav" id="main-nav">
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="apropos.html">Qui sommes-nous</a></li>
+                <li><a href="page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="disponibilite.html">Disponibilité</a></li>
+                <li><a href="page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="recette">
+            <h2>Sauce Forestière au champignon et au poulet</h2>
+            <img src="../img/img-sauce-forestiere.jpg" alt="Sauce Forestière">
+            
+            <p>
+                Une recette classique de la cuisine française, que l'on a déjà goûtée au moins une fois.
+                Cette recette est présentée en détail par notre chef cuisinier Emmanuel, qui souhaite vous transmettre sa recette favorite de sauce forestière aux champignons.
+            </p>
+            <p>Avant de commencer, vérifiez d'avoir les bons ingrédients : </p>
+           
+            <ul class="list-ingredient">
+                <li>Sel & poivre</li>
+                <li>300 grammes de champignons</li>
+                <li>1 oignon moyen blanc ou rouge</li>
+                <li>2 gousses d'ail</li>
+                <li>1 petit pot de crème fraîche liquide</li>
+                <li>Vin blanc ou jus de citron</li>
+                <li>Cuisse de poulet désossée</li>
+            </ul>
+        </section>
+
+        <!-- Étapes de la recette -->
+        <section class="etapes-recette">
+            <h2>Étapes de préparation</h2>
+            <ol>
+                <li>Lavez et coupez les champignons en fines lamelles.</li>
+                <li>Épluchez et hachez l'oignon et l'ail.</li>
+                <li>Dans une poêle, faites revenir les oignons et l'ail avec un filet d'huile d'olive.</li>
+                <li>Ajoutez les champignons et laissez cuire jusqu'à ce qu'ils libèrent leur eau.</li>
+                <li>Incorporez les cuisses de poulet et faites-les dorer des deux côtés.</li>
+                <li>Déglacez avec un peu de vin blanc ou de jus de citron, puis laissez réduire.</li>
+                <li>Ajoutez la crème fraîche, assaisonnez avec sel et poivre, puis laissez mijoter 10 minutes.</li>
+                <li>Servez chaud avec du riz ou des pâtes.</li>
+            </ol>
+        </section>
+    </main>
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="../img/fleche.png" alt="Retour en haut"> 
+    </div>
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        // Code pour le bouton burger
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('#main-nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Code pour le lien "Retour"
+        const backButton = document.querySelector('.back-button');
+
+        backButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.history.back();
+        });
+            // Fonction pour revenir en haut de la page
+            function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/SAE_WEB1/img/atik_mahmoud.PNG b/SAE_WEB1/img/atik_mahmoud.PNG
new file mode 100644
index 0000000..c3d562a
Binary files /dev/null and b/SAE_WEB1/img/atik_mahmoud.PNG differ
diff --git a/SAE_WEB1/img/background.jpg b/SAE_WEB1/img/background.jpg
new file mode 100644
index 0000000..dff78e8
Binary files /dev/null and b/SAE_WEB1/img/background.jpg differ
diff --git a/SAE_WEB1/img/brick.png b/SAE_WEB1/img/brick.png
new file mode 100644
index 0000000..1a816ec
Binary files /dev/null and b/SAE_WEB1/img/brick.png differ
diff --git a/SAE_WEB1/img/design.jpg b/SAE_WEB1/img/design.jpg
new file mode 100644
index 0000000..5ad8b29
Binary files /dev/null and b/SAE_WEB1/img/design.jpg differ
diff --git a/SAE_WEB1/img/fleche.png b/SAE_WEB1/img/fleche.png
new file mode 100644
index 0000000..f32d9fd
Binary files /dev/null and b/SAE_WEB1/img/fleche.png differ
diff --git a/SAE_WEB1/img/img-fond-chef.jpg b/SAE_WEB1/img/img-fond-chef.jpg
new file mode 100644
index 0000000..5fa2f0c
Binary files /dev/null and b/SAE_WEB1/img/img-fond-chef.jpg differ
diff --git a/SAE_WEB1/img/img-fond-chef1.jpg b/SAE_WEB1/img/img-fond-chef1.jpg
new file mode 100644
index 0000000..55ad716
Binary files /dev/null and b/SAE_WEB1/img/img-fond-chef1.jpg differ
diff --git a/SAE_WEB1/img/img-fond-chef2.jpg b/SAE_WEB1/img/img-fond-chef2.jpg
new file mode 100644
index 0000000..2fe4b55
Binary files /dev/null and b/SAE_WEB1/img/img-fond-chef2.jpg differ
diff --git a/SAE_WEB1/img/img-fond-chef3.jpg b/SAE_WEB1/img/img-fond-chef3.jpg
new file mode 100644
index 0000000..ddc7fb9
Binary files /dev/null and b/SAE_WEB1/img/img-fond-chef3.jpg differ
diff --git a/SAE_WEB1/img/img-sauce-forestiere.jpg b/SAE_WEB1/img/img-sauce-forestiere.jpg
new file mode 100644
index 0000000..b4e303b
Binary files /dev/null and b/SAE_WEB1/img/img-sauce-forestiere.jpg differ
diff --git a/SAE_WEB1/img/img_manu.jpg b/SAE_WEB1/img/img_manu.jpg
new file mode 100644
index 0000000..6b72a38
Binary files /dev/null and b/SAE_WEB1/img/img_manu.jpg differ
diff --git a/SAE_WEB1/img/logo_etoile&saveurs.png b/SAE_WEB1/img/logo_etoile&saveurs.png
new file mode 100644
index 0000000..a90ea3b
Binary files /dev/null and b/SAE_WEB1/img/logo_etoile&saveurs.png differ
diff --git a/SAE_WEB1/img/mhajeb.png b/SAE_WEB1/img/mhajeb.png
new file mode 100644
index 0000000..cdefa2b
Binary files /dev/null and b/SAE_WEB1/img/mhajeb.png differ
diff --git a/SAE_WEB1/img/riz-cantonais.jpg b/SAE_WEB1/img/riz-cantonais.jpg
new file mode 100644
index 0000000..a30a09e
Binary files /dev/null and b/SAE_WEB1/img/riz-cantonais.jpg differ
diff --git a/SAE_WEB1/img/tamill.PNG b/SAE_WEB1/img/tamill.PNG
new file mode 100644
index 0000000..77aa3c5
Binary files /dev/null and b/SAE_WEB1/img/tamill.PNG differ
diff --git a/SAE_WEB1/img/wael.PNG b/SAE_WEB1/img/wael.PNG
new file mode 100644
index 0000000..3b05c4a
Binary files /dev/null and b/SAE_WEB1/img/wael.PNG differ
diff --git a/SAE_WEB1/index.html b/SAE_WEB1/index.html
new file mode 100644
index 0000000..5736c37
--- /dev/null
+++ b/SAE_WEB1/index.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Accueil - Étoiles & Saveurs</title>
+    <link rel="stylesheet" href="css/style_global.css">
+</head>
+<style>
+html, body {
+    background-color: #fbede0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+
+    background: url("img/img-fond-chef.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+</style>
+<body>
+    <header>
+        <a href="index.html"><img src="img/logo_etoile&saveurs.png" alt="TIAMZON Emmanuel" width="100"></a>
+            
+            <div class="burger-menu" onclick="toggleMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            
+            <a href="html/inscription.html" class="register-button">S'inscrire</a>
+
+            
+            <a href="html/connecter.html" class="login-button">Se connecter</a>
+
+        <nav class="main-menu">
+            <ul>
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="html/apropos.html">Qui sommes-nous</a></li>
+                <li><a href="html/page_recettes.html">Nos Chefs et Nos Recettes</a></li>
+                <li><a href="html/carte_chefs.html">Carte des Chefs</a></li> <!-- Nouveau lien -->
+                <li><a href="html/disponibilite.html">Disponibilité</a></li>
+                <li><a href="html/page_contact.html">Contact</a></li>
+                <li><a href="javascript:history.back()" class="back-button">Retour</a></li>
+            </ul>
+        </nav>
+    </header>
+    
+    <main>
+        <!-- Barre latérale gauche -->
+        <div class="left-bar">
+        </div>         
+        
+        <!-- Contenu principal -->
+        <div class="main-container">
+            
+            <!-- Section d'introduction -->
+            <section class="intro">
+                <h2>Bienvenue sur notre plateforme</h2>
+                <h3>La cuisine des grands chefs pour tous!</h3>
+                <p>Découvrez une expérience culinaire unique avec les meilleurs chefs de votre région.</p>
+            </section>
+            
+            <!-- Section des chefs -->
+            <section class="chefs">
+                <!-- Chef de l'année -->
+                <article class="chef-of-the-year">
+                    <img src="img/img_manu.jpg" alt="TIAMZON Emmanuel" width="150">
+                    <h3>Chef de l'année</h3>
+                    <p>TIAMZON Emmanuel</p>
+                </article>
+    
+                <!-- Profil d'un chef -->
+                <article class="chef">
+                    <a href="html/chef_tiamzon.html">
+                        <h3>TIAMZON Emmanuel</h3>
+                        <p>Spécialités : Cuisine asiatique</p>
+                        <p>⭐⭐⭐⭐⭐</p>
+                        <p>Spécialités : Cuisine italienne</p>
+                        <p>⭐⭐⭐</p>
+                        <p>Spécialités : Friture de toutes sortes</p>
+                        <p>⭐⭐⭐⭐</p>
+                        <p class="price">Prix moyen : 75 €/personne</p>
+                    </a>
+                </article>
+            </section>
+
+            <!-- Section FAQ -->
+            <section class="faq">
+                <h2>Foire Aux Questions (FAQ)</h2>
+                
+                <div class="faq-item">
+                    <h3>Qu'est-ce qu'Étoiles & Saveurs ?</h3>
+                    <p>Étoiles & Saveurs est une plateforme qui vous permet de découvrir des chefs talentueux et de vivre une expérience culinaire unique.</p>
+                </div>
+                
+                <div class="faq-item">
+                    <h3>Comment réserver un chef ?</h3>
+                    <p>Vous pouvez réserver un chef directement sur notre site en sélectionnant la recette et le chef qui vous intéresse.</p>
+                </div>
+                
+                <div class="faq-item">
+                    <h3>Les chefs sont-ils disponibles à tout moment ?</h3>
+                    <p>Les disponibilités des chefs varient. Veuillez consulter leur profil pour connaître leurs horaires disponibles.</p>
+                </div>
+                <div class="faq-item">
+                    <h3>Plage de Prix des Chefs</h3>
+                    <ul>
+                        <li>Repas simple : 50 €/personne</li>
+                        <li>Menu gastronomique : 100 €/personne</li>
+                        <li>Ateliers de cuisine : 75 €/personne</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- Section des avis -->
+            <section class="reviews">
+                <h2>Avis des Clients</h2>
+                
+                <div class="review-item">
+                    <p>"Une expérience culinaire inoubliable ! Les chefs sont incroyables et les recettes sont délicieuses."</p>
+                    <div class="stars">⭐⭐⭐⭐⭐</div>
+                    <p>- Marie Dupont</p>
+                </div>
+                
+                <div class="review-item">
+                    <p>"J'ai découvert des saveurs nouvelles et appris à cuisiner des plats incroyables grâce à Étoiles & Saveurs."</p>
+                    <div class="stars">⭐⭐⭐⭐</div>
+                    <p>- Julien Martin</p>
+                </div>
+                
+                <div class="review-item">
+                    <p>"Une plateforme exceptionnelle pour tous les passionnés de cuisine. Une belle découverte !"</p>
+                    <div class="stars">⭐⭐⭐⭐⭐</div>
+                    <p>- Sarah Cohen</p>
+                    
+                </div>
+            </section>
+        </div>
+    
+        <!-- Barre latérale droite -->
+        <div class="right-bar"></div> 
+    </main>
+
+    
+    <div class="scroll-to-top" onclick="scrollToTop()">
+        <img src="img/fleche.png" alt="Retour en haut"> 
+    </div>
+
+    <footer>
+        <p>&copy; 2024 Étoiles & Saveurs. Tous droits réservés.</p>
+    </footer>
+
+    <script>
+        const burgerMenu = document.querySelector('.burger-menu');
+        const nav = document.querySelector('header nav');
+
+        burgerMenu.addEventListener('click', () => {
+            nav.classList.toggle('open');
+        });
+
+        window.addEventListener('resize', () => {
+            if (window.innerWidth > 768) {
+                nav.classList.remove('open');
+            }
+        });
+
+        // Fonction pour revenir en haut de la page
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+    </script>
+</body>
+</html>