/* Importation de la police Poppins depuis Google Fonts */ /* Assurez-vous d'ajouter ce lien dans la section de votre HTML : */ body { font-family: 'Poppins', sans-serif; line-height: 1.8; margin: 0; padding: 0; background-image: url('../img/fond.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; color: #4b4b4b; } nav { width: 100%; background-color: #D9AED8; padding: 10px 0; position: relative; z-index: 1000; } .navbar { display: flex; justify-content: center; list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; } .navbar li { margin: 0 15px; } .navbar a { text-decoration: none; color: white; font-family: 'Poppins', sans-serif; font-weight: 600; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease; white-space: nowrap; display: block; font-size: 16px; } .navbar a:hover { background-color: #000000; color: white; } .navbar .active { background-color: #000000; color: white; } /* --- Styles pour le titre principal et l'introduction --- */ .wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; /* Ajout d'un fond semi-transparent pour améliorer la lisibilité du texte sur l'image de fond */ background-color: rgba(255, 255, 255, 0.85); /* Blanc avec 85% d'opacité */ border-radius: 15px; /* Arrondi léger */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Légère ombre */ padding-top: 40px; /* Plus d'espace en haut */ padding-bottom: 40px; /* Plus d'espace en bas */ margin-top: 40px; /* Marge pour éloigner de la navbar */ margin-bottom: 40px; /* Marge pour l'espace en dessous */ } h1.slide-up { /* Ciblage spécifique du H1 */ font-family: 'Poppins', sans-serif; /* Conserve Poppins */ font-size: 3.5em; /* Taille plus grande pour un impact visuel fort */ font-weight: 800; /* Extra gras pour faire ressortir */ color: #d94b8e; /* Couleur de la navbar pour le H1 pour une belle cohérence */ text-align: center; margin-bottom: 25px; /* Augmente la marge en dessous */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Petite ombre pour le faire ressortir */ letter-spacing: -1px; /* Légèrement plus serré pour le style */ } .intro { font-size: 1.3em; /* Taille plus grande pour l'introduction */ color: #5a5a5a; /* Gris plus doux */ text-align: center; max-width: 800px; /* Limite la largeur pour une meilleure lisibilité */ margin: 0 auto 50px; /* Plus d'espace en bas de l'intro */ line-height: 1.7; /* Légèrement plus d'espace */ font-weight: 500; /* Un peu plus de poids */ } .intro strong { color: #e63946; /* Utilisez une couleur d'accentuation forte pour le strong */ font-weight: 700; /* Rendre le texte en gras encore plus prononcé */ } /* --- Styles des cartes de recettes --- */ .recipes { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; /* Espacement un peu plus grand entre les cartes */ padding: 30px 0; /* Padding vertical pour la section */ } .recipe { flex: 1 1 300px; /* Permet aux cartes d'être plus flexibles */ max-width: 320px; /* Taille maximale un peu ajustée */ background: #fff; border-radius: 15px; /* Arrondi plus doux */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée pour faire ressortir */ text-align: center; padding: 25px; /* Plus de padding interne */ opacity: 0; animation: fadeInUp 1s ease forwards; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour l'ombre aussi */ } .recipe:hover { transform: translateY(-8px); /* Effet de soulèvement plus marqué */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Ombre plus intense au survol */ } .recipe img { width: 100%; height: 220px; /* Hauteur fixe pour les images */ object-fit: cover; /* S'assure que l'image couvre bien l'espace */ border-radius: 10px; /* Arrondi sur les images */ transition: transform 0.3s ease; } .recipe img:hover { transform: scale(1.03); /* Zoom léger au survol de l'image */ } .recipe h3 { font-family: 'Poppins', sans-serif; font-size: 1.8em; /* Taille plus grande pour les titres de recette */ margin: 25px 0 15px; /* Plus d'espace autour du titre */ color: #d94b8e; /* Couleur de la navbar pour les titres de recette */ font-weight: 700; /* Bien gras */ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); /* Petite ombre pour faire ressortir */ } .recipe p { font-size: 1.05em; /* Texte un peu plus grand */ margin-bottom: 30px; /* Plus d'espace avant le bouton */ color: #6a6a6a; /* Gris plus clair pour le paragraphe */ line-height: 1.7; } .recipe a { display: inline-block; text-decoration: none; color: white; background-color: #ff9aa2; /* Garde la couleur rose douce */ padding: 12px 25px; /* Plus de padding pour un bouton plus grand */ border-radius: 30px; /* Bouton très arrondi */ transition: background-color 0.3s ease, transform 0.2s ease; font-weight: 600; /* Texte du bouton en gras */ letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre sur le bouton */ } .recipe a:hover { background-color: #ff758c; /* Rose plus foncé au survol */ transform: translateY(-2px); /* Léger soulèvement au survol du bouton */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* Animations (inchangées) */ .fade-in { animation: fadeIn 1s ease-in-out forwards; opacity: 0; } .slide-up { animation: slideUp 0.8s ease-out forwards; transform: translateY(30px); opacity: 0; } .delay-1 { animation-delay: 0.3s; } .delay-2 { animation-delay: 0.6s; } .card-pop { animation: cardPop 0.5s ease-out forwards; transform: scale(0.8); opacity: 0; } @keyframes fadeIn { to { opacity: 1; } } @keyframes slideUp { to { transform: translateY(0); opacity: 1; } } @keyframes cardPop { to { transform: scale(1); opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive mobile */ @media (max-width: 768px) { h1.slide-up { font-size: 2.5em; /* Ajuste la taille du H1 sur mobile */ } .intro { font-size: 1.1em; max-width: 95%; /* Adapte la largeur de l'intro */ margin-bottom: 30px; } .recipes { flex-direction: column; align-items: center; gap: 30px; /* Réduit l'espace sur mobile */ } .recipe { width: 90%; max-width: 350px; padding: 20px; } .recipe h3 { font-size: 1.5em; /* Taille plus petite pour les titres de recette */ margin: 20px 0 10px; } .recipe p { font-size: 1em; margin-bottom: 20px; } .recipe a { padding: 10px 20px; } .wrapper { padding: 20px 15px; margin: 20px auto; } } @media (max-width: 480px) { h1.slide-up { font-size: 2em; } .intro { font-size: 0.95em; margin-bottom: 20px; } .recipe img { height: 180px; /* Ajuste la hauteur des images sur très petits écrans */ } .recipe h3 { font-size: 1.3em; } }