:root{
  --green:#2f7d32; --dark:#0e1a12; --light:#f7fbf7; --accent:#9cd39f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:#222;background:var(--light);line-height:1.5}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:white;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:800;font-size:1.3rem;color:var(--dark);text-decoration:none}
.logo span{color:var(--green)}

.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:#1b1b1b}
.nav a:hover,.nav a.active{background:var(--accent)}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;inline-size:44px;block-size:44px;border:0;background:transparent;padding:8px}
.burger span{display:block;inline-size:100%;block-size:2px;background:#222}

/* Hero */
.hero{position:relative;isolation:isolate;color:white;background:linear-gradient( to bottom, rgba(0,0,0,.50), rgba(0,0,0,.35) ), var(--bg) center/cover no-repeat}
.hero>.container{padding:120px 0 100px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 10px;font-weight:900}
.hero p{max-inline-size:62ch}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{background:var(--green);color:white;border:0;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;border:2px solid white}

/* Sections */
.section-title{font-size:1.8rem;margin:28px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:white;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.06);padding-bottom:10px}
.card h3{margin:12px 16px 6px}
.card p{margin:0 16px 14px}

.about{padding:40px 0 10px}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:12px 0 16px;list-style:none}
.badges li{background:#eaf7ea;color:#114114;border:1px solid #d1ead1;border-radius:999px;padding:8px 12px}
.socials{display:flex;gap:14px}
.socials a{color:var(--green);font-weight:700}
.about-img{border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.10)}

.contact{background:white;padding:40px 0}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.contact-form{display:grid;gap:12px;background:#f6fbf6;border:1px solid #e3f0e3;padding:18px;border-radius:16px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #cfe5d0;background:white}
.contact-info{background:#fff;border:1px solid #eee;padding:18px;border-radius:16px}

.site-footer{background:#0f1a11;color:#dfe7e0;padding:26px 0;margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.footer-inner a{color:#dfe7e0;text-decoration:none}
.footer-inner a:hover{text-decoration:underline}

/* Animations */
.reveal-up{opacity:0;translate:0 10px;animation:reveal .7s ease forwards}
.reveal-up.delay-1{animation-delay:.15s}
.reveal-up.delay-2{animation-delay:.3s}
@keyframes reveal{to{opacity:1;translate:0 0}}
.fade-in{opacity:0;animation:fade .9s ease forwards; animation-delay:.2s}
@keyframes fade{to{opacity:1}}

/* Responsive */
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .grid-3{grid-template-columns:1fr}
  .burger{display:flex}
  .nav{position:fixed;inset:64px 0 auto 0;background:white;transform:translateY(-10px);opacity:0;visibility:hidden;transition:.25s;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .nav.open{transform:translateY(0);opacity:1;visibility:visible}
  .nav ul{flex-direction:column;padding:12px}
}



.socials {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.socials a {
  color: var(--green);
  transition: transform 0.2s ease, color 0.2s ease;
}

.socials a:hover {
  color: var(--accent);
  transform: scale(1.15);
}



/* Container visuel de la carte */
.card-media {
  position: relative;
  overflow: hidden
}

.card-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s ease
}

/* Effet léger au survol */
.card:hover .card-media img {
  transform: scale(1.03)
}

/* Bandeau en bas de l’image */
.card-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: inline-block;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  text-transform: uppercase;
  border-radius: 10px;
  /* fond lisible sur toutes les images */
  background: linear-gradient(180deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .35)), rgba(0, 0, 0, .35);
  backdrop-filter: saturate(120%) blur(1px);
  border: 1px solid rgba(255, 255, 255, .25);
}

.card-label{
  left:0; right:auto; bottom:auto; top:12px;
  border-radius:0 10px 10px 0;
}