* { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; padding-top: 80px; font-family: 'Arial', sans-serif; background-color: #F2F2F2; display: flex; flex-direction: column; min-height: 100vh; } .navbar { background-color: #4A305A; padding: 10px; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 1000; /* Assure que l'en-tête reste au-dessus du contenu */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère pour le style */ } .logo img { width: 4.7cm; height: 1.7cm; margin-left: 1cm; } .nav-links { display: flex; align-items: center; } .nav-link { color: white; text-decoration: none; margin: 0 15px; transition: color 0.3s ease; } .reserve-btn { background-color: #FFB039; padding: 10px 20px; border-radius: 10px; color: #4A305A; } .burger-menu { display: none; cursor: pointer; } .burger-menu div { width: 25px; height: 3px; background-color: white; margin: 6px 0; } .nav-link:hover { color: #87CEEB; } @media screen and (max-width: 768px) { .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 60px; left: 0; width: 100%; background-color: #4A305A; z-index: 1; } .nav-links.show { display: flex; } .nav-link { margin: 10px 0; } .burger-menu { display: block; } } .content { max-width: 1380px; margin: 15px auto; padding: 0 20px; background-color: white; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .chef-section { text-align: center; padding: 20px 0; } .chef-container { display: flex; flex-wrap: wrap; justify-content: center; } .chef { flex: 1; max-width: 300px; margin: 10px; text-align: center; background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 15px; } .chef img { max-width: 100%; border-radius: 8px; margin-bottom: 10px; } .chef h3 { margin-top: 10px; color: #4A305A; } .chef p { color: #333; font-size: 16px; line-height: 1.5; } .voir-plus { text-align: center; margin-top: 20px; } .voir-plus a.voir-plus-btn { display: inline-block; background-color: #FFB039; padding: 10px 20px; border-radius: 10px; color: white; text-decoration: none; margin-top: 10px; } h2 { color: #4A305A; text-align: center; } p { color: #333; font-size: 16px; line-height: 1.5; } .bienvenue-section { margin-top: 20px; text-align: center; } .bienvenue-video { width: 80%; /* largeur de la fenêtre de la vidéo */ max-height: 400px; margin-bottom: 20px; } .plats-populaires { text-align: center; padding: 20px 0; } .plat-container { display: flex; flex-wrap: wrap; justify-content: center; } .plat { flex: 1; max-width: 300px; margin: 10px; text-align: center; background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 15px; } .plat img { max-width: 100%; border-radius: 8px; margin-bottom: 10px; } .plat h3 { margin-top: 10px; color: #4A305A; } .plat p { color: #333; font-size: 16px; line-height: 1.5; } #scrollTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; background-color: #FFB039; border: none; border-radius: 5px; font-size: 25px; padding: 10px; cursor: pointer; } .container { position: relative; margin-bottom: 120px; } .footer { background-color: #4A305A; /* Couleur de fond du pied de page */ color: white; padding: 20px; /* Hauteur du pied de page */ text-align: center; } .footer-content { display: flex; justify-content: space-around; } .footer-section { text-align: center; margin: 10px; } .footer-signature { order: 1; } .social-icons { display: flex; align-items: center; justify-content: center; /* Centrez les icônes sur les petits écrans */ margin-top: 10px; /* Ajoutez une marge pour séparer les icônes du texte */ } .social-icon img { width: 30px; height: 30px; } .footer-section h3 { margin-bottom: 10px; } .footer-section img { width: 30px; height: 30px; margin-right: 5px; } /* Style pour les petits écrans */ @media screen and (max-width: 768px) { .footer-content { flex-wrap: wrap; } .footer-section { flex: 1; } } .client-reviews { text-align: center; padding: 20px 0; } .client-review-container { display: flex; overflow-x: auto; justify-content: center; margin-top: 20px; } .client-review { flex: 1; max-width: 300px; margin: 10px; text-align: center; background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 15px; } .client-review img { max-width: 100%; border-radius: 50%; margin-bottom: 10px; } .client-review p { color: #333; font-size: 16px; line-height: 1.5; } .client-review h3 { margin-top: 10px; color: #4A305A; } .evaluation { color: #FFB039; font-size: 18px; } .restaurant-tables { max-width: 100%; height: auto; margin-top: 20px; border-radius: 8px; }