/* ============================================================
   OLIVE — Système de design du site vitrine
   Ancré sur l'identité déjà existante de l'application :
   vert #176b45, marque "goutte" asymétrique, Inter.
   Signature : la marque agrandie en filigrane sur les sections
   sombres, contrastée avec la rigueur tabulaire des chiffres
   (ledger). Tension organique / précision — reflète le
   positionnement "comptabilité pensée pour l'Afrique".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root{
  --ink:#12211a;
  --forest:#0f2a1e;
  --forest-2:#123424;
  --green:#176b45;
  --green-light:#3a9e6f;
  --lime:#d9fb72;
  --paper:#f7f8f4;
  --paper-warm:#eef1ea;
  --mute:#5c6b61;
  --mute-2:#8a978d;
  --line:#dde3da;
  --line-dark:rgba(255,255,255,0.14);
  --radius:16px;
  --shadow:0 20px 50px rgba(15,42,30,0.12);
  --shadow-lg:0 30px 80px rgba(15,42,30,0.35);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--green); display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
}
.eyebrow::before{ content:''; width:16px; height:2px; background:var(--green); border-radius:2px; }
.eyebrow.on-dark{ color:var(--lime); }
.eyebrow.on-dark::before{ background:var(--lime); }

h1,h2,h3{ font-weight:800; letter-spacing:-0.02em; line-height:1.08; }
h2{ font-size:40px; letter-spacing:-0.03em; }
h3{ font-size:22px; }
.section-lede{ font-size:18px; color:var(--mute); max-width:560px; line-height:1.55; margin-top:14px; }

/* --- Marque --- */
.mark{ width:26px; height:26px; border-radius:50% 50% 50% 7px; background:var(--green); flex-shrink:0; }
.mark.lime{ background:var(--lime); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-0.5px; color:var(--ink); }
.brand.on-dark{ color:#fff; }

/* --- Filigrane goutte (signature) --- */
.blob-watermark{
  position:absolute; width:900px; height:900px; opacity:0.06; pointer-events:none;
  background:var(--lime); border-radius:42% 58% 61% 39% / 45% 40% 60% 55%;
}

/* --- Header --- */
header.site{
  position:sticky; top:0; z-index:100; background:rgba(247,248,244,0.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .bar{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto; }
nav.main{ display:flex; align-items:center; gap:34px; }
nav.main a{ font-size:14.5px; font-weight:600; color:var(--ink); opacity:0.82; transition:opacity .15s; }
nav.main a:hover{ opacity:1; }
.hdr-actions{ display:flex; align-items:center; gap:18px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:10px; transition:transform .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 10px 24px rgba(23,107,69,0.28); }
.btn-primary:hover{ box-shadow:0 14px 30px rgba(23,107,69,0.36); }
.btn-lime{ background:var(--lime); color:var(--ink); box-shadow:0 10px 24px rgba(217,251,114,0.35); }
.btn-ghost{ color:var(--ink); font-weight:700; font-size:14.5px; padding:12px 6px; }
.btn-outline{ border:1.5px solid var(--line-dark); color:#fff; padding:11px 20px; border-radius:10px; font-weight:700; font-size:14.5px; }
.btn-outline.on-light{ border-color:var(--line); color:var(--ink); }

/* --- Botones tamaño --- */
.btn-lg{ padding:15px 28px; font-size:15.5px; border-radius:12px; }

/* --- Cards --- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:20px; letter-spacing:0.2px; }
.pill-green{ background:#eaf5ed; color:var(--green); }
.pill-amber{ background:#fdf1dd; color:#8a5a12; }

/* --- Footer --- */
footer.site{ background:var(--forest); color:#cfe0d5; padding:64px 0 28px; position:relative; overflow:hidden; }
footer.site .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
footer.site h4{ color:#fff; font-size:13px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:16px; }
footer.site a{ display:block; font-size:14.5px; color:#b7c9bd; padding:6px 0; transition:color .15s; }
footer.site a:hover{ color:#fff; }
footer.site .bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; color:#8fa598; flex-wrap:wrap; gap:12px; }

/* --- Utilitaires --- */
.section{ padding:100px 0; position:relative; }
.section.dark{ background:var(--forest); color:#e9f0eb; }
.section.warm{ background:var(--paper-warm); }
.center{ text-align:center; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* --- Ledger stat --- */
.stat-num{ font-family:'JetBrains Mono',monospace; font-weight:700; font-variant-numeric:tabular-nums; }

@media (max-width:900px){
  nav.main{ display:none; }
  h2{ font-size:30px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  footer.site .cols{ grid-template-columns:1fr 1fr; }
  .section{ padding:64px 0; }
}