.body{
  background-color: #7ee29f;
}

  /* Style du bouton Se connecter */
    .login-btn {
      margin-left: auto;
    }

    .login-btn a {
      background: linear-gradient(135deg, #1e90ff, #20c997); /* bleu-vert dégradé */
      color: white;
      padding: 8px 18px;
      border-radius: 20px;
      font-weight: 600;
      text-decoration: none;
      transition: 0.3s ease;
      display: inline-block;
    }

    .login-btn a:hover {
      background: linear-gradient(135deg, #20c997, #1e90ff);
      transform: scale(1.05);
    }

    /* Pour bien aligner le bouton à droite */
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
:root{
  --green:#1e7f3f;
  --green-dark:#14572a;
  --muted:#f5fbf6;
  --text:#18331f;
  --accent:#7fbf8f;
  --max-width:1200px;
}
*{box-sizing:border-box}
body{font-family: 'Poppins', sans-serif; color:var(--text); margin:0; background:white;}
h1,h2,h3{font-family: 'Merriweather', serif; color:var(--green); margin:0 0 20px 0;}
.site-header{position:sticky; top:0; z-index:50; background:linear-gradient(90deg, rgba(32, 244, 53, 0.9), rgba(223, 224, 223, 0.9)); backdrop-filter: blur(4px); border-bottom:1px solid #e6efe9;}
.header-inner{max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px;}
.brand{display:flex; gap:12px; align-items:center;}
.logo{height:76px; border-radius:6px; box-shadow:0 6px 14px rgba(30,127,63,0.06);}
.brand-text h1{font-size:20px;}
.brand-text .tag{font-size:13px; color:var(--green-dark); margin-top:4px;}
.nav {display:flex; align-items:center; gap:16px;}
.nav-toggle{display:none; background:none; border:0; font-size:22px;}
.menu{display:flex; list-style:none; gap:8px; margin:0; padding:0;}
.menu a{padding:8px 12px; text-decoration:none; color:var(--green-dark); border-radius:6px; font-weight:600;}
.menu a:hover, .menu a.active{background:var(--muted); box-shadow:inset 0 -3px 0 rgba(30,127,63,0.06);}

/* Hero */
.hero{position:relative; min-height:60vh; display:flex; align-items:center; color:white; margin-bottom:20px;}
.hero-media{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.45);}
.hero-content{position:relative; z-index:2; max-width:var(--max-width); margin:0 auto; padding:40px 20px; text-align:left; color:white;}
.hero-content h2{font-size:40px; margin-bottom:8px;}
.hero-content p{font-size:18px; margin-bottom:18px; color:rgba(255,255,255,0.9);}
.cta-row{display:flex; gap:12px; margin-top:10px;}
.btn{padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600;}
.btn-primary{background:var(--green); color:white;}
.btn-primary:hover{background:var(--green-dark);}
.btn-outline{background:transparent; border:2px solid rgba(255,255,255,0.18); color:white;}

/* Sections */
.section{ background-color: #7ee29f;
  padding:48px 20px;}
.container{ 
  max-width:var(--max-width); margin:0 auto; display:flex; gap:28px; align-items:center; flex-wrap:wrap;}
.section.alternate .media-left, .section.alternate .media-right{order:0;}
.media-left, .media-right{flex:1 1 480px; min-width:300px;}
.content-left, .content-right{flex:1 1 420px; min-width:300px;}
.media-left img, .media-right img{width:100%; height:auto; border-radius:10px; box-shadow:0 10px 30px rgba(30,127,63,0.08);}

/* testimonials */
.testimonials{background:var(--muted); text-align:center;}
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:18px;}
.card{background:white; padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.04);}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
.contact-card{background:linear-gradient(180deg, #f8fff8, white); padding:20px; border-radius:10px; box-shadow:0 6px 20px rgba(30,127,63,0.04);}
.contact-form label{display:block; margin-bottom:10px;}
.contact-form input, .contact-form textarea{width:100%; padding:10px; border:1px solid #dfefe1; border-radius:8px;}


/* Responsive */
@media (max-width:900px){
  .menu{display:none; position:absolute; right:12px; top:70px; background:white; box-shadow:0 8px 30px rgba(0,0,0,0.08); border-radius:8px; padding:12px; flex-direction:column;}
  .nav-toggle{display:block;}
  .hero-content{text-align:center;}
  .container{flex-direction:column;}
  .contact-grid{grid-template-columns:1fr;}
}
/* Pour remplacer les images par les vidéos */
.media-left video, .media-right video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(30,127,63,0.08);
}

/* Hero vidéo */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}

.site-header{
  background-color: #30d667;
  
  }