/* Styles de base */
:root {
  --primary-color: #245c3d;
  --secondary-color: #3a6f4d;
  --accent-color: #c17a0f;
  --success-color: #4caf50;
  --text-color: #333;
  --light-bg: #f9fdf9;
  --white: #ffffff;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-md: 0 5px 15px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--light-bg);
  color: var(--text-color);
  line-height: 1.6;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-color);
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Header */
header {
  text-align: center;
  padding: 0;
  background: linear-gradient(to bottom, #f0f8f2, #f5fbf7);
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="%23e8f5e9" opacity="0.3"/></svg>');
  opacity: 0.1;
  pointer-events: none;
}

header img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

header h1 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-top: 1rem;
  animation: fadeInUp 0.8s ease;
}

header p {
  color: #4a4a4a;
  font-size: 1rem;
  margin-top: 0.2rem;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

/* Navigation */
.top-nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.top-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 1rem;
  margin: 0;
}

.top-nav a {
  text-decoration: none;
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  transition: var(--transition);
}

.top-nav a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--success-color);
  transition: width 0.3s ease;
}

.top-nav a:hover::after,
.top-nav a[aria-current="page"]::after {
  width: 100%;
}

/* Section d'introduction avec animation */
.intro-Omaëa {
  text-align: center;
  background: linear-gradient(135deg, #f0f8f2 0%, #e8f5e9 100%);
  padding: 1.5rem 1rem;
  margin: 1rem auto;
  border-radius: 12px;
  max-width: 900px;
  position: relative;
  overflow: hidden;
}

.intro-Omaëa::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(76, 175, 80, 0.05) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.intro-content {
  position: relative;
  z-index: 1;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-Omaëa h2 {
  font-size: 1.75rem;
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

.intro-Omaëa .subtitle {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.intro-Omaëa p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.highlight-quote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--accent-color);
  border-left: 3px solid var(--accent-color);
  padding-left: 1rem;
  margin: 1rem 0;
  position: relative;
  animation: slideInLeft 0.8s ease 0.5s backwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Boutons améliorés */
.btn-intro {
  display: inline-block;
  background: linear-gradient(135deg, var(--success-color) 0%, #43a047 100%);
  color: white;
  padding: 0.7rem 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.btn-intro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.btn-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-intro:hover::before {
  left: 100%;
}

/* Container principal avec sidebar */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

/* Posts Grid avec animations améliorées */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.post-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(30px);
}

.post-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.post-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.post-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-card:hover img {
  transform: scale(1.05);
}

.post-content {
  padding: 1.5rem;
}

.read-more {
  display: inline-block;
  margin-top: 1rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

.read-more::after {
  content: '→';
  position: absolute;
  right: -20px;
  opacity: 0;
  transition: all 0.3s ease;
}

.read-more:hover {
  color: var(--success-color);
}

.read-more:hover::after {
  right: -25px;
  opacity: 1;
}

/* Animations pour les sections */
.animate-section {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.animate-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-quote {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease;
}

.animate-quote.slide-in {
  opacity: 1;
  transform: translateX(0);
}

.animate-message {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.5s ease;
}

.animate-message.fade-in {
  opacity: 1;
  transform: scale(1);
}

.new-message {
  animation: newMessagePulse 1s ease;
}

@keyframes newMessagePulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* Sidebar */
.sidebar > div {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease;
}

.sidebar > div:hover {
  transform: translateY(-3px);
}

/* Search widget amélioré */
.search-box {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.search-box:focus-within {
  border-color: var(--success-color);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

#pathoSearch {
  flex: 1;
  padding: 10px 15px;
  border: none;
  font-size: 16px;
  outline: none;
  background: transparent;
}

#pathoSearchBtn {
  background-color: var(--success-color);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#pathoSearchBtn:hover {
  background-color: #43a047;
}

#pathoSearchBtn.searching {
  animation: pulse 0.6s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Newsletter améliorée */
.newsletter-widget.enhanced {
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e9 100%);
  border: 2px solid var(--success-color);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter-icon {
  font-size: 3rem;
  color: var(--success-color);
  margin-bottom: 1rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.newsletter-widget.enhanced small {
  display: block;
  margin-top: 0.5rem;
  color: var(--primary-color);
  font-style: italic;
}

/* Newsletter section principale améliorée */
/* Conteneur pour les feuilles */
/* Newsletter section principale améliorée */
.newsletter-section.enhanced {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 3rem 2rem;
  border-radius: 20px;
  text-align: left;
  max-width: 900px;
  margin: 3rem auto;
  color: white;
  position: relative;
  overflow: hidden;
}
.newsletter-section.enhanced {
  position: relative;
  overflow: hidden;
}

/* Illustration SVG de feuilles de moringa/plantes médicinales */
/* Vraies feuilles de moringa - petites feuilles ovales */
/* Grande branche de moringa réaliste */
.newsletter-section.enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  right: 5%;
  width: 250px;
  height: 350px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 350'%3E%3Cpath d='M125 20 L125 330' stroke='%234a7c59' stroke-width='3' opacity='0.4'/%3E%3Cellipse cx='90' cy='50' rx='15' ry='8' fill='%236ba368' transform='rotate(-35 90 50)' opacity='0.7'/%3E%3Cellipse cx='160' cy='60' rx='15' ry='8' fill='%2387b887' transform='rotate(35 160 60)' opacity='0.7'/%3E%3Cellipse cx='80' cy='90' rx='15' ry='8' fill='%236ba368' transform='rotate(-40 80 90)' opacity='0.6'/%3E%3Cellipse cx='170' cy='100' rx='15' ry='8' fill='%2387b887' transform='rotate(40 170 100)' opacity='0.6'/%3E%3Cellipse cx='85' cy='130' rx='15' ry='8' fill='%236ba368' transform='rotate(-30 85 130)' opacity='0.7'/%3E%3Cellipse cx='165' cy='140' rx='15' ry='8' fill='%2387b887' transform='rotate(30 165 140)' opacity='0.7'/%3E%3Cellipse cx='75' cy='170' rx='15' ry='8' fill='%236ba368' transform='rotate(-35 75 170)' opacity='0.6'/%3E%3Cellipse cx='175' cy='180' rx='15' ry='8' fill='%2387b887' transform='rotate(35 175 180)' opacity='0.6'/%3E%3Cellipse cx='80' cy='210' rx='15' ry='8' fill='%236ba368' transform='rotate(-40 80 210)' opacity='0.7'/%3E%3Cellipse cx='170' cy='220' rx='15' ry='8' fill='%2387b887' transform='rotate(40 170 220)' opacity='0.7'/%3E%3Cellipse cx='85' cy='250' rx='15' ry='8' fill='%236ba368' transform='rotate(-30 85 250)' opacity='0.6'/%3E%3Cellipse cx='165' cy='260' rx='15' ry='8' fill='%2387b887' transform='rotate(30 165 260)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: swayingMoringa 15s ease-in-out infinite;
  transform-origin: bottom center;
  opacity: 0.2;
}

/* Tasse de tisane réaliste */
/* Tasse de tisane simple et réaliste */
.newsletter-section.enhanced::after {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 120px;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M25 65 L25 85 Q25 95 35 98 Q50 102 65 100 Q80 98 90 93 Q95 90 95 85 L95 65 Q95 60 90 58 L30 58 Q25 60 25 65' fill='%23f5f5f5' stroke='%23d4d4d4' stroke-width='2'/%3E%3Cpath d='M95 70 Q100 68 105 70 Q110 73 108 80 Q106 85 100 83 Q95 81 95 75' fill='none' stroke='%23d4d4d4' stroke-width='2'/%3E%3Cpath d='M35 60 L85 60' stroke='%238b7355' stroke-width='8' opacity='0.3'/%3E%3Cpath d='M55 50 Q56 45 57 40 M60 50 Q61 45 62 40 M65 50 Q66 45 67 40' stroke='%23f0f0f0' stroke-width='2' opacity='0.4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: steamEffect 8s ease-in-out infinite;
  opacity: 0.25;
}

/* Pluie de feuilles de tisane */
@keyframes leafRain {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

/* Feuille 1 */
.newsletter-section.enhanced .leaf-rain-1 {
  content: '';
  position: absolute;
  top: -50px;
  left: 10%;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cellipse cx='15' cy='15' rx='12' ry='6' fill='%236ba368' transform='rotate(-45 15 15)' opacity='0.7'/%3E%3Cpath d='M10 10 L20 20' stroke='%234a7c59' stroke-width='1'/%3E%3C/svg%3E");
  animation: leafRain 12s linear infinite;
  animation-delay: 0s;
}

/* Feuille 2 */
.newsletter-section.enhanced .leaf-rain-2 {
  content: '';
  position: absolute;
  top: -50px;
  left: 30%;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cellipse cx='15' cy='15' rx='12' ry='6' fill='%2387b887' transform='rotate(45 15 15)' opacity='0.6'/%3E%3Cpath d='M10 10 L20 20' stroke='%234a7c59' stroke-width='1'/%3E%3C/svg%3E");
  animation: leafRain 15s linear infinite;
  animation-delay: 3s;
}

/* Feuille 3 */
.newsletter-section.enhanced .leaf-rain-3 {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cellipse cx='15' cy='15' rx='12' ry='6' fill='%236ba368' transform='rotate(-30 15 15)' opacity='0.8'/%3E%3Cpath d='M10 10 L20 20' stroke='%234a7c59' stroke-width='1'/%3E%3C/svg%3E");
  animation: leafRain 18s linear infinite;
  animation-delay: 6s;
}

/* Feuille 4 */
.newsletter-section.enhanced .leaf-rain-4 {
  content: '';
  position: absolute;
  top: -50px;
  left: 70%;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cellipse cx='15' cy='15' rx='12' ry='6' fill='%2387b887' transform='rotate(60 15 15)' opacity='0.7'/%3E%3Cpath d='M10 10 L20 20' stroke='%234a7c59' stroke-width='1'/%3E%3C/svg%3E");
  animation: leafRain 14s linear infinite;
  animation-delay: 9s;
}

/* Feuille 5 */
.newsletter-section.enhanced .leaf-rain-5 {
  content: '';
  position: absolute;
  top: -50px;
  left: 85%;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cellipse cx='15' cy='15' rx='12' ry='6' fill='%236ba368' transform='rotate(-60 15 15)' opacity='0.6'/%3E%3Cpath d='M10 10 L20 20' stroke='%234a7c59' stroke-width='1'/%3E%3C/svg%3E");
  animation: leafRain 16s linear infinite;
  animation-delay: 2s;
}

/* Animations */
@keyframes swayingMoringa {
  0%, 100% {
    transform: rotate(-5deg) translateX(0);
  }
  50% {
    transform: rotate(5deg) translateX(15px);
  }
}

@keyframes steamEffect {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

.newsletter-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.newsletter-benefits {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.newsletter-benefits li {
  padding: 0.5rem 0;
  font-size: 1.1rem;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.newsletter-benefits li:nth-child(1) { animation-delay: 0.1s; }
.newsletter-benefits li:nth-child(2) { animation-delay: 0.2s; }
.newsletter-benefits li:nth-child(3) { animation-delay: 0.3s; }
.newsletter-benefits li:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter-form input {
  padding: 1rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
}

.newsletter-form button {
  padding: 1rem;
  background: white;
  color: var(--primary-color);
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.newsletter-promise {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Carte numérologique améliorée */
.carte-numerologique {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #fdfaf6 0%, #fff5ee 100%);
  border-radius: 15px;
  margin-top: 15px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
}

.carte-visuelle.fade-in {
  animation: cardReveal 0.8s ease;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-color);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.3s ease;
  z-index: 1000;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--secondary-color);
  transform: translateY(-3px);
}

/* Notification system */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  color: var(--success-color);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2000;
}

.notification.show {
  transform: translateY(0);
  opacity: 1;
}

.notification.success {
  border: 2px solid var(--success-color);
}

/* Section communauté améliorée */
.community-section {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-md);
  /* Assurez-vous que le background est blanc */
  background-color: #f8f5f0 !important;
}

.community-testimonials {
  margin-bottom: 2rem;
  background-color: #ffffff;
}

.community-testimonials blockquote {
  background: linear-gradient(to right, #ffffff 0%, #f8f9fa 100%);
  border-left: 4px solid var(--accent-color);
  padding: 15px;
  margin: 15px 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  transition: transform 0.3s ease;
}

.community-testimonials blockquote:hover {
  transform: translateX(5px);
}

.laisse-message {
  background: linear-gradient(135deg, #ffffff 0%, #f0f8f2 100%);
  border-radius: 20px;
  padding: 30px;
  margin: 25px 0;
  box-shadow: 0 8px 25px rgba(36, 92, 61, 0.1);
  border: 2px solid rgba(76, 175, 80, 0.1);
  position: relative;
  overflow: hidden;
}
/* Effet décoratif en arrière-plan */
.laisse-message::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: rgba(76, 175, 80, 0.05);
  border-radius: 50%;
  z-index: 0;
}

.laisse-message > * {
  position: relative;
  z-index: 1;
}
/* Style des champs de formulaire */
.laisse-message input, 
.laisse-message textarea {
  padding: 14px 18px;
  border: 2px solid #fafafa;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #fafafa;
  width: 100%;
}

.laisse-message input:focus, 
.laisse-message textarea:focus {
  border-color: #d2e6d3;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
  outline: none;
}

/* Placeholder stylisé */
.laisse-message input::placeholder,
.laisse-message textarea::placeholder {
  color: #9e9e9e;
  font-style: italic;
}

/* Bouton amélioré */
.laisse-message button {
  background: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  display: inline-block;
  margin-top: 10px;
}

.laisse-message button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
  background: linear-gradient(135deg, #43a047 0%, #388e3c 100%);
}

.laisse-message button:active {
  transform: translateY(0);
}

/* Animation au survol du formulaire */
.laisse-message:hover {
  box-shadow: 0 10px 30px rgba(36, 92, 61, 0.15);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .laisse-message {
    padding: 20px;
  }
  
  .laisse-message h3 {
    font-size: 1.1rem;
  }
}

/* Section messages avec fond blanc */
.community-messages {
  background-color: #ffffff;
  padding: 1rem 0;
}

.messages-container {
  background-color: #ffffff;
  padding: 1rem 0;
}

.message {
  background: #f8f9fa;
  border-left: 4px solid var(--primary-color);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 0 8px 8px 0;
}

/* Footer amélioré et centré */
.site-footer {
  background: linear-gradient(135deg, var(--primary-color) 0%, #1a3d2a 100%);
  color: white;
  padding: 3rem 0 1rem;
  margin-top: 4rem;
  text-align: center; /* Centre le contenu du footer */
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0 2rem;
  align-items: center;
  justify-items: center; /* Centre les éléments de la grille */
}

.footer-section {
  text-align: center; /* Centre le contenu de chaque section */
  width: 100%;
}

.footer-section h4 {
  margin-bottom: 1rem;
  text-align: center;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.footer-section a {
  color: white;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.footer-section a:hover {
  opacity: 1;
}

.social-links {
  display: flex;
  gap: 1rem;
  font-size: 1.5rem;
  justify-content: center; /* Centre les icônes sociales */
  margin: 0 auto;
}

.social-links a {
  transition: all 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-3px);
  color: var(--success-color);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Responsive footer */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer-section {
    margin-bottom: 1.5rem;
  }
}

/* Responsive design amélioré */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .newsletter-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
  }
  
  .intro-Omaëa {
    padding: 1rem;
  }
  
  .back-to-top {
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 10px;
  }
}

/* Accessibilité - Focus states */
*:focus {
  outline: 2px solid var(--success-color);
  outline-offset: 2px;
}

button:focus,
a:focus {
  outline: 2px solid var(--success-color);
  outline-offset: 3px;
}

/* Print styles */
@media print {
  .top-nav,
  .sidebar,
  .back-to-top,
  .notification,
  .social-links,
  .newsletter-widget,
  .search-widget {
    display: none;
  }
  
  .container {
    grid-template-columns: 1fr;
  }
  
  .post-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
  }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.featured-posts h2,
.community-section h2 {
  text-align: center !important;
  width: 100%;
  display: block;
  margin-bottom: 2rem; /* Augmentez cette valeur pour plus d'espace */
  color: #245c3d; /* Vert foncé - couleur principale d'Omaëa */
}
/* === PARCOURS PROGRESSIF 2030 === */
.journey-section {
    margin: 3rem 0;
    padding: 0 1rem;
}

.journey-header {
    text-align: center;
    margin-bottom: 3rem;
}

.journey-subtitle {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 1rem auto;
    line-height: 1.6;
}

.global-progress {
    max-width: 800px;
    margin: 0 auto 3rem;
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-percentage {
    font-weight: bold;
    color: #245c3d;
}

.progress-bar-container {
    height: 8px;
    background: #e8f5e8;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #245c3d, #3a8d5e);
    transition: width 0.8s ease;
    border-radius: 4px;
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.step-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border-left: 4px solid #e0e0e0;
}

.step-card.active {
    border-left-color: #245c3d;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(36, 92, 61, 0.15);
}

.step-card.locked {
    opacity: 0.6;
    pointer-events: none;
}

.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 1rem;
}

.step-card.active .step-number {
    background: #245c3d;
    color: white;
}

.step-info h3 {
    margin: 0 0 0.5rem;
    color: #245c3d;
    font-size: 1.3rem;
}

.step-info p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.time-estimate {
    display: inline-block;
    background: #e8f5e8;
    color: #245c3d;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.step-image {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
    margin: 1rem 0;
}

.step-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.step-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, #245c3d, #3a8d5e);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 140px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(36, 92, 61, 0.3);
}

.btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background: transparent;
    border: 2px solid #245c3d;
    color: #245c3d;
    padding: 0.6rem 1.3rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #245c3d;
    color: white;
}

.adaptive-suggestions {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1000px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 4px solid #ff9500;
}

.suggestion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.suggestion-card {
    background: #fff9f0;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #ffe0b3;
    transition: all 0.3s ease;
}

.suggestion-card:hover {
    transform: translateY(-2px);
    border-color: #ff9500;
}

/* Responsive */
@media (max-width: 768px) {
    .journey-steps {
        grid-template-columns: 1fr;
    }
    
    .step-actions {
        flex-direction: column;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
    }
}