diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..d9e1757
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,199 @@
+body{
+	background-color:#F2F3F3;
+	background:	background-size: 100%;
+	 font-size: 16px;
+	 margin : 0 ;
+}
+@media (min-width: 800px) {
+    body {/* styles pour les écrans de largeur supérieure à 800px */
+        font-size: 18px;
+    }
+}
+@media (max-width: 600px) {
+    body {/* styles pour les écrans de largeur inférieure à 600px */
+        font-size: 14px;
+    }
+}
+na
+header{
+	background-color: #F2F3F3;
+	text-align: center;
+}
+
+
+.burger-menu-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.burger-menu-button {
+  display: none; /* cacher le bouton par défaut */
+  padding: 0.5em 1em;
+  background: #333;
+  color: #fff;
+  cursor: pointer;
+}
+
+.burger-menu {
+  display: none; /* cacher le menu burger par défaut */
+  background: #fff;
+  padding: 1em;
+}
+
+.burger-menu-icon {
+  width: 1.5em;
+  height: 0.25em;
+  background: #fff;
+  margin-bottom: 0.5em;
+}
+
+/* Afficher le bouton et le menu burger pour les écrans de petite taille */
+@media (max-width: 768px) {
+  .burger-menu-button {
+    display: block;
+  }
+}
+
+
+nav {
+  background-color: #f00202; /* Couleur de fond du menu */
+  display: flex; /* Afficher les éléments du menu côte à côte */
+  justify-content: space-between; /* Aligner les éléments du menu sur les deux côtés de la nav */
+}
+
+nav ul {
+  list-style: none; /* Enlever les puces des éléments de la liste */
+  margin: 5px; /* Enlever les marges */
+  padding: 5px; /* Enlever les espacements */
+  display: flex; /* Afficher les éléments de la liste côte à côte */
+ 
+}
+
+nav li {
+  margin: 10px 10px; /* Ajouter une marge à gauche et à droite de chaque élément */
+
+}
+
+nav a {
+  color: #fefefe; /* Couleur de text pour les liens */
+  text-decoration: none; /* Enlever la surbrillance des liens */
+  padding: 25px 100px; /* Ajouter un espacement intérieur aux liens */
+  transition: background-color 0.2s ease-in;  /* Ajouter une transition pour la couleur de fond */
+}
+
+nav a:hover { /* Appliquer les styles à utiliser lorsque l'utilisateur survole un lien */
+  background-color: #a30303; /* Couleur de fond lorsque l'utilisateur survole un lien */
+}
+.style{
+ font-style: italic;
+  font-size: 26px;
+  line-height: 25px;
+  padding-left: 30px;
+  border-left: 5px solid #ccc;
+  margin: 20px 0;
+	display: flex;
+	justify-content: center;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-item {
+  grid-column: span 1;
+}
+
+img.grid-item {
+   width:95%;
+}
+h1{  margin: 20px 0;
+display: flex;
+	justify-content: center;
+}
+p {
+	display: flex;
+	justify-content: center;
+}
+
+video {
+	display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+
+}
+iframe {
+  margin: auto;
+    display: flex;
+	justify-content: center;
+}
+#topBtn {
+  display: none; /* masquer le bouton par défaut */
+  position: fixed; /* positionner le bouton en haut à droite de la page */
+  bottom: 10px;
+  right: 15px;
+  z-index: 99; /* placer le bouton au-dessus du contenu */
+  font-size: 10px;
+  border: none;
+  outline: none;
+  background-color: #ff0000; /* couleur de fond */
+  color: white; /* couleur du texte */
+  cursor: pointer;
+  padding: 15px;
+  border-radius: 10px; /* arrondir les bords */
+}
+
+#topBtn:hover {
+  background-color: #555; /* changer la couleur de fond lorsque l'utilisateur passe la souris dessus */
+}
+
+footer {
+  background-color: #333;
+  color: #fefefe;
+  padding: 20px;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+   
+}
+footer > * {
+    margin: 0 10px; /* ajoute un espacement de 10px entre les éléments */
+}
+.circle {
+  border-radius: 12%; /* met en forme le div en cercle */
+  width: 50px; /* largeur du cercle */
+  height: 50px; /* hauteur du cercle */
+  overflow: hidden; /* masque tout débordement */
+  text-align: center; /* centre l'image horizontalement */
+  line-height: 75px; /* centre l'image verticalement */
+  display: flex;
+  justify-content: center;
+}
+
+.circle img {
+  max-width: 100%;/* redimensionne l'image pour qu'elle s'adapte au conteneur */
+}
+a:link {
+  color: white;
+}
+
+a:visited {
+  color: white;
+}
+
+a:hover {
+  color: white;
+}
+
+a:active {
+  color: white;
+}
+a[href*="Mentions_légales"] {
+    display: inline-block;
+    text-align: center;
+	color: #fff;
+}