/* ====== Base ====== */
:root{
  /* Couleurs  (à ajuster si tu veux pile la teinte) */
  --purple: #8ab400;
  --purple-dark: #697a47;
  --lime: #8ab400;
  --brown: #565240;
  --white: #ffffff;
  --text: #ffffff;
  --nav: #697a47;

  --max: 1200px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#fff;
  color:#111;
}

/* ====== Header ====== */
.site-header{
  position: sticky;      /* reste visible au scroll */
  top: 0;
  z-index: 9999;

  background: #ffffff;
  border-bottom: 1px solid #eee;
}

.header-inner{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;

  height: 100px;          /* AVANT : ~74px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo img{
  height: 98px;          /* AVANT : ~48px */
  width: auto;
  display: block;
}

.nav{
  display:flex;
  gap:28px;
  align-items:center;
}
.nav a{
  color: var(--nav);
  font-weight:700;
  font-size:18px;
  text-decoration:none;
  letter-spacing:.2px;
}
.nav a:hover{ text-decoration:underline; }

.burger{
  display:none;
  border:1px solid #e8e8e8;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:22px;
  height:2px;
  background: var(--nav);
  margin:4px 0;
}

/* ====== Mobile drawer ====== */
.mobile-drawer{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:9999;
}
.mobile-panel{
  position:absolute;
  top:0; right:0;
  width:min(360px, 92vw);
  height:100%;
  background:#fff;
  padding:16px;
}
.mobile-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.mobile-panel a{
  display:block;
  padding:12px 10px;
  border:1px solid #eee;
  border-radius:10px;
  margin:10px 0;
  color: var(--nav);
  font-weight:800;
  text-decoration:none;
}
.close{
  border:0;
  background:transparent;
  font-size:20px;
  cursor:pointer;
}

/* ====== Hero layout (3 colonnes) ====== */
.hero{
  position:relative;
  width:100%;
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr 0.95fr 0.55fr; /* gauche / centre / droite */
  min-height: 620px;
  width:100%;
}

/* Images */
.hero-left img,
.hero-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-left{
  position:relative;
  overflow:hidden;
}

.hero-center{
  position:relative;
  background: var(--purple);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 56px;
}

.hero-content{
  width:min(520px, 100%);
  color: var(--text);
}

.kicker{
  color: var(--lime);
  font-weight:900;
  font-size:44px;
  letter-spacing:.5px;
  margin:0 0 8px 0;
}

.hero-content h1{
  margin:0 0 18px 0;
  font-weight:900;
  font-size:56px;
  line-height:1;
  letter-spacing:.5px;
}

.hero-content p{
  margin:0 0 26px 0;
  line-height:1.75;
  font-size:16px;
  opacity:.95;
}

/* Buttons */
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:14px 22px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:2px solid transparent;
}
.btn-green{
  background: var(--lime);
  color:#fff;
}
.btn-outline{
  background:transparent;
  border-color: rgba(255,255,255,.55);
  color:#fff;
}

/* Right column stacked */
.hero-right{
  position:relative;
  display:grid;
  grid-template-rows: 1fr 1fr;
  overflow:hidden;
}
.right-top,
.right-bottom{
  position:relative;
  overflow:hidden;
}

 .hero-logo{
  margin-bottom: 28px;
}

.hero-logo img{
  max-width: 320px;   /* ajuste si besoin */
  width: 100%;
  height: auto;
  display: block;
}

 

/* ====== Sections demo ====== */
.block{
  width:min(var(--max), calc(100% - 40px));
  margin:60px auto;
}
.block h2{ color:#222; margin:0 0 12px; }
.block p{ margin:0; color:#555; line-height:1.7; }

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .hero-grid{ grid-template-columns: 1.15fr 0.95fr 0.70fr; }
  .kicker{ font-size:38px; }
  .hero-content h1{ font-size:48px; }
}

@media (max-width: 900px){
  .nav{ display:none; }
  .burger{ display:block; }

  .hero-grid{
    grid-template-columns: 1fr;
    min-height:auto;
  }
  .hero-left{ height: 320px; }
  .hero-center{ padding:44px 22px; }
  .hero-right{ grid-template-rows: 240px 240px; }

  .green-arc{ left:-60px; bottom: 35%; width:240px; height:240px; border-width:16px; }
  .green-arc-bottom{ left: 10%; bottom:-260px; width:520px; height:520px; border-width:22px; }
}