/* ===========================================================
   Agritechnologic Africa — Site vitrine
   Design mobile-first, palette vert/nature sur fond blanc
   =========================================================== */

:root{
  --forest:      #163A26;
  --forest-800:  #1E4A30;
  --leaf:        #2F8F53;
  --leaf-600:    #257A44;
  --leaf-light:  #6FBE84;
  --lime:        #C7E27A;
  --gold:        #E3A83B;
  --gold-600:    #C98F26;
  --cream:       #FAF8F1;
  --white:       #FFFFFF;
  --ink:         #17241B;
  --muted:       #5B6B5E;
  --line:        #E4E4DA;

  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(23, 36, 27, .06);
  --shadow-md: 0 12px 32px rgba(23, 36, 27, .12);

  --container-w: 1160px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--forest); line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; }
button{ font-family: inherit; cursor:pointer; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--forest); color:#fff;
  padding:.75rem 1.25rem; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{
  width:100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--leaf); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--leaf-600); box-shadow: var(--shadow-md); }
.btn-gold{ background: var(--gold); color: var(--forest); }
.btn-gold:hover{ background: var(--gold-600); }
.btn-outline{ background: transparent; border-color: var(--forest); color: var(--forest); }
.btn-outline:hover{ background: var(--forest); color:#fff; }
.btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.15); }
.btn-sm{ padding:.6rem 1rem; font-size:.85rem; }
.btn-block{ width:100%; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color: var(--leaf-600); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:.78rem; margin-bottom: .75rem;
}
.eyebrow::before{ content:""; width:22px; height:3px; background: var(--gold); border-radius:2px; display:inline-block; }

.section{ padding: 3.5rem 0; }
.section-cream{ background: var(--cream); }
.section-forest{ background: var(--forest); color: #EAF3EC; }
.section-forest h2, .section-forest h3{ color:#fff; }
.section-head{ max-width: 640px; margin-bottom: 2.25rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(250,248,241,.98);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1.25rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-logo{ border-radius: 10px; background:#0f2417; padding:3px; }
.brand-text{ font-family: var(--font-head); font-weight:600; font-size:1.05rem; color: var(--forest); }
.brand-text strong{ color: var(--leaf); }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--line); border-radius:10px;
  background:#fff; position:relative; font-size:1.3rem; color: var(--forest);
}
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:inline-block; }

.primary-nav{
  position: fixed; inset: 64px 0 0 0; background: var(--forest);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem;
  transform: translateX(100%); transition: transform .25s ease;
  padding: 2rem;
}
.primary-nav.open{ transform: translateX(0); }
.primary-nav ul{ display:flex; flex-direction:column; gap:1.5rem; text-align:center; }
.primary-nav a{ display:inline-flex; align-items:center; gap:.6rem; color:#fff; font-weight:700; font-size:1.3rem; }
.primary-nav a i{ font-size:1.1rem; color: var(--lime); }
.primary-nav a.active{ color: var(--lime); }
.btn-nav-cta{ display:none; }

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  padding: 2.5rem 0 3rem;
}
.hero-inner{
  display:flex; flex-direction:column; gap:2rem;
}
.hero-copy{ max-width: 620px; }
.hero-copy h1{ font-size: clamp(2rem, 6vw, 3.1rem); margin-bottom:.6rem; }
.hero-copy .lead{ font-size:1.08rem; color: var(--muted); max-width:520px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.5rem; }
.hero-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); }
.hero-media img{ width:100%; height: 280px; object-fit:cover; }
.hero-badge{
  position:absolute; left:16px; bottom:16px; background: rgba(255,255,255,.94);
  padding: .7rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  font-weight:800; color: var(--forest); font-size:.85rem; display:flex; gap:.5rem; align-items:center;
}
.hero-badge i{ color: var(--gold-600); font-size:1.1rem; }

/* ===========================================================
   Mission
   =========================================================== */
.mission-grid{ display:grid; gap:1.25rem; grid-template-columns: 1fr; }
.mission-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 1.75rem; box-shadow: var(--shadow-sm);
}
.mission-card .icon{
  width:52px; height:52px; border-radius:14px; background: var(--leaf);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem;
}
.mission-card:nth-child(2) .icon{ background: var(--gold); color: var(--forest); }
.mission-card:nth-child(3) .icon{ background: var(--forest); }

/* ---------- Stats ---------- */
.stats-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; text-align:center; }
.stat-item .num{ font-family: var(--font-head); font-size: clamp(2rem,7vw,2.8rem); font-weight:700; color: var(--lime); }
.stat-item .label{ font-size:.85rem; color:#CFE3D4; margin-top:.25rem; }

/* ---------- Products ---------- */
.product-grid{ display:grid; gap:1.5rem; grid-template-columns: 1fr; }
.product-card{
  background:#fff; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
}
.product-card img{ height:200px; object-fit:cover; width:100%; }
.product-card .body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.product-card .tag{
  align-self:flex-start; background: var(--lime); color: var(--forest); font-weight:800;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .7rem; border-radius:999px;
}
.product-card .slogan{ color: var(--leaf-600); font-weight:700; font-style:italic; }

/* ---------- Awards ---------- */
.awards-wrap{ display:flex; flex-direction:column; gap:2rem; align-items:center; }
.awards-photo{ width:100%; max-width:280px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); }
.awards-list{ display:flex; flex-direction:column; gap:1rem; width:100%; }
.award-item{
  display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-md); padding:1rem 1.2rem; box-shadow: var(--shadow-sm);
}
.award-item .medal{ font-size:1.4rem; color: var(--gold-600); }
.award-item strong{ display:block; color:var(--forest); }
.award-item span{ color:var(--muted); font-size:.92rem; }

/* ---------- Final CTA ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--leaf) 0%, var(--forest) 100%);
  border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; text-align:center; color:#fff;
}
.cta-band h2{ color:#fff; }
.cta-actions{ display:flex; flex-direction:column; gap:.8rem; align-items:stretch; margin-top:1.5rem; }

/* ===========================================================
   Portfolio page
   =========================================================== */
.project-list{ display:flex; flex-direction:column; gap:1.75rem; }
.project-card{
  display:grid; gap:1.25rem; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm);
}
.project-card img{ width:100%; height:220px; object-fit:cover; }
.project-card .body{ padding: 1.5rem 1.5rem 1.75rem; }
.project-card .badge{
  display:inline-block; background: var(--cream); color: var(--leaf-600); font-weight:800;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding:.3rem .7rem; border-radius:999px; margin-bottom:.6rem;
}
.project-card .badge.gold{ background:#FCEFD3; color:var(--gold-600); }
.project-card ul{ margin-top:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.project-card li{ display:flex; align-items:flex-start; gap:.55rem; color:var(--muted); font-size:.94rem; }
.project-card li i{ color: var(--leaf); margin-top:.15rem; }
.project-card .badge i, .project-card .badge.gold i{ margin-right:.2rem; }

.gallery-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:.75rem; }
.gallery-grid img{ width:100%; height:150px; object-fit:cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.gallery-item{ display:block; position:relative; overflow:hidden; border-radius: var(--radius-sm); }
.gallery-item img{ transition: transform .3s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item .zoom-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(22,58,38,0); color:#fff; font-size:1.6rem; opacity:0; transition: opacity .2s ease, background .2s ease;
}
.gallery-item:hover .zoom-icon{ opacity:1; background: rgba(22,58,38,.35); }

/* ===========================================================
   Blog page
   =========================================================== */
.blog-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.blog-filters a{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.85rem; font-weight:700; color:var(--forest);
}
.blog-filters a.active, .blog-filters a:hover{ background: var(--leaf); border-color:var(--leaf); color:#fff; }

.blog-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column;
}
.blog-card .thumb{
  height:150px; background: linear-gradient(135deg, var(--leaf-light), var(--leaf)); display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#fff;
}
.blog-card .body{ padding:1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-card .cat{ color: var(--gold-600); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.blog-card h3{ font-size:1.15rem; margin-bottom:.2rem; }
.blog-card .meta{ color: var(--muted); font-size:.8rem; margin-top:auto; padding-top:.6rem; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.blog-card .meta i{ color: var(--leaf-600); }

.newsletter-box{
  margin-top:3rem; background: var(--cream); border-radius: var(--radius-lg); padding:2rem 1.5rem; text-align:center;
}
.newsletter-box h2{ display:flex; align-items:center; justify-content:center; gap:.5rem; }
.newsletter-form{ display:flex; flex-direction:column; gap:.7rem; max-width:420px; margin: 1.25rem auto 0; }
.newsletter-form input{
  padding:.85rem 1.1rem; border-radius:999px; border:1px solid var(--line); font-family:inherit; font-size:.95rem;
}
.share-row{ display:flex; gap:.6rem; justify-content:center; margin-top:1.25rem; }
.share-row a{
  width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--forest); transition: background .15s ease, color .15s ease, transform .15s ease;
}
.share-row a:hover{ background: var(--leaf); color:#fff; transform: translateY(-2px); }

/* ===========================================================
   Contact page
   =========================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
.contact-form{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding:1.75rem; box-shadow: var(--shadow-sm);
}
.form-row{ margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.form-row label{ font-weight:700; font-size:.9rem; color: var(--forest); display:flex; align-items:center; gap:.4rem; }
.form-row label i{ color: var(--leaf); font-size:.85rem; }
.form-row input, .form-row select, .form-row textarea{
  padding:.8rem 1rem; border-radius: 10px; border:1px solid var(--line); font-family:inherit; font-size:.95rem; background:#fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:2px solid var(--leaf-light); border-color: var(--leaf); }
.field-validation-error{ color:#C0392B; font-size:.82rem; }
.honeypot-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.alert-success{
  background:#EAF6EC; border:1px solid var(--leaf-light); color: var(--leaf-600); font-weight:700;
  padding:1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom:1.25rem;
}

.contact-info-card{
  background: var(--forest); color:#fff; border-radius: var(--radius-lg); padding:1.75rem;
}
.contact-info-card h3{ color:#fff; display:flex; align-items:center; gap:.5rem; }
.contact-info-card h3 i{ color: var(--gold); }
.contact-info-list{ display:flex; flex-direction:column; gap:1rem; margin: 1.25rem 0; }
.contact-info-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.contact-info-list .ic{
  width:34px; height:34px; flex-shrink:0; border-radius:50%; background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:1rem; color: var(--gold);
}
.contact-info-list a{ color:#fff; text-decoration:underline; }
.contact-social{ display:flex; gap:.6rem; margin-top:1rem; }
.contact-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:1rem; transition: background .15s ease, transform .15s ease;
}
.contact-social a:hover{ background: var(--leaf); transform: translateY(-2px); }

.map-embed{ border-radius: var(--radius-lg); overflow:hidden; margin-top:1.5rem; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:220px; border:0; display:block; }

.faq-list{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.5rem; }
.faq-list > h2{ display:flex; align-items:center; gap:.5rem; }
.faq-item{ border:1px solid var(--line); border-radius: var(--radius-sm); background:#fff; overflow:hidden; }
.faq-item summary{
  padding:1rem 1.2rem; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  color: var(--forest);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary i{ color: var(--leaf); transition: transform .2s ease; flex-shrink:0; }
.faq-item[open] summary i{ transform: rotate(180deg); }
.faq-item .answer{ padding: 0 1.2rem 1.1rem; color: var(--muted); }

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position: fixed; right:1.1rem; bottom:1.1rem; z-index:150;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md);
  font-size:1.6rem; transition: transform .15s ease;
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.05); }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ position:relative; background: var(--forest); color:#CFE3D4; padding: 3.5rem 0 1.5rem; margin-top: 2rem; overflow:hidden; }
.footer-top-accent{
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--lime) 45%, var(--leaf-light) 100%);
}
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.25rem; }

.footer-logo{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.footer-logo img{ border-radius:10px; background:#0f2417; padding:3px; }
.footer-logo span{ font-family: var(--font-head); font-weight:600; color:#fff; font-size:1.05rem; }
.footer-logo strong{ color: var(--lime); }

.footer-brand p{ color:#B9D1BE; font-size:.92rem; }
.footer-badges{ display:flex; flex-direction:column; gap:.5rem; margin: 1rem 0; }
.footer-badges li{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color: var(--lime); font-weight:700; }
.footer-badges i{ color: var(--gold); font-size:1rem; }

.footer-social{ display:flex; gap:.6rem; margin-top:1.1rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.1); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem; transition: background .15s ease, transform .15s ease;
}
.footer-social a:hover{ background: var(--leaf); transform: translateY(-2px); }

.footer-col h3{
  color:#fff; font-size:1rem; margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem;
}
.footer-col h3 i{ color: var(--gold); font-size:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{ color:#CFE3D4; font-size:.92rem; display:inline-flex; align-items:center; gap:.5rem; }
.footer-col a:hover{ color:#fff; }
.footer-col ul li a i{ font-size:.7rem; color: var(--leaf-light); transition: transform .15s ease; }
.footer-col ul li a:hover i{ transform: translateX(3px); }

.footer-contact li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; }
.footer-contact li i{ color: var(--gold); margin-top:.2rem; }

.footer-newsletter-text{ font-size:.88rem; color:#B9D1BE; }
.footer-newsletter{ display:flex; flex-direction:column; gap:.6rem; }
.footer-newsletter-field{
  display:flex; align-items:center; gap:.5rem; background:#fff; border-radius:999px; padding:.15rem .3rem .15rem 1rem;
}
.footer-newsletter-field i{ color: var(--muted); }
.footer-newsletter-field input{ flex:1; min-width:0; border:0; padding:.55rem 0; font-family:inherit; font-size:.85rem; background:transparent; }
.footer-newsletter-field input:focus{ outline:none; }
.footer-newsletter .btn{ align-self:flex-start; }

.footer-bottom{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; margin-top:2.75rem; padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; color:#9FC0A6; text-align:center; position:relative;
}
.footer-bottom p{ margin:0; display:flex; align-items:center; gap:.4rem; }

.back-to-top{
  margin-top:1rem; width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.1); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition: background .15s ease, transform .15s ease;
}
.back-to-top:hover{ background: var(--leaf); transform: translateY(-3px); }

/* ===========================================================
   Tablet / Desktop
   =========================================================== */
@media (min-width: 768px){
  .mission-grid{ grid-template-columns: repeat(3,1fr); }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-grid{ grid-template-columns: repeat(4,1fr); }
  .awards-wrap{ flex-direction:row; align-items:stretch; }
  .awards-photo{ max-width:260px; flex-shrink:0; }
  .project-card{ grid-template-columns: 1fr 1fr; align-items:stretch; }
  .project-card img{ height:100%; }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
  .blog-grid{ grid-template-columns: repeat(2,1fr); }
  .newsletter-form{ flex-direction:row; }
  .newsletter-form input{ flex:1; }
  .contact-grid{ grid-template-columns: 1.15fr .85fr; }
  .cta-actions{ flex-direction:row; justify-content:center; }
  .hero-media img{ height:380px; }
  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap:2rem; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left; }
  .footer-newsletter{ flex-direction:row; }
  .footer-newsletter-field{ flex:1; }
  .footer-newsletter .btn{ align-self:auto; }
}

@media (min-width: 1024px){
  .nav-toggle{ display:none; }
  .primary-nav{
    position:static; transform:none; background:transparent; flex-direction:row; padding:0; gap:2rem;
  }
  .primary-nav ul{ flex-direction:row; gap:2rem; }
  .primary-nav a{ color: var(--forest); font-size:.95rem; gap:.4rem; }
  .primary-nav a i{ display:none; }
  .primary-nav a.active{ color: var(--leaf-600); }
  .btn-nav-cta{ display:inline-flex; }
  .hero-inner{ flex-direction:row; align-items:center; }
  .hero-copy{ flex:1; }
  .hero-media{ flex:1; }
  .hero-media img{ height:440px; }
  .blog-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery-grid{ grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 1024px) and (min-resolution: 1dppx){
  .section{ padding: 5rem 0; }
}