:root {
  --green-dark:#005f2e;
  --green-light:#59ae34;
  --bg-soft:#f6faf7;
  --radius:18px;
  --text-dark:#0f2f22;
  --text-gray:#5f5f5f;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Montserrat',sans-serif;
  color:var(--text-dark);
  background:white;
  line-height:1.6;
}

.container{
  width: 92%;
  max-width: 1100px;
  margin: auto;
}



.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

.logo{
  font-weight:800;
  font-size:1.3rem;
  color:var(--green-dark);
}

.nav-links{
  display:flex;
  gap:28px;
  align-items:center;
}

.nav-links a{
  text-decoration:none;
  color:var(--text-dark);
  font-weight:500;
}

.btn{
  padding:12px 24px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.btn-primary{
  background:var(--green-dark);
  color:white;
}

.btn-primary:hover{
  background:var(--green-light);
}

.btn-outline{
  border:2px solid var(--green-dark);
  color:var(--green-dark);
}

section{
  padding:120px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-dark);
}

.section-subtitle {
  margin-top: 18px;
  font-size: 1.1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #3f5248; /* vert très foncé adouci */
  line-height: 1.6;
}

.badge{
  display:inline-block;
  background:var(--green-light);
  color:white;
  padding:6px 14px;
  border-radius:20px;
  font-size:.8rem;
  margin-bottom:20px;
}

.cards{
  display:grid;
  gap:30px;
}

.card{
  background:var(--bg-soft);
  padding:35px;
  border-radius:var(--radius);
  transition:.3s;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
.footer-country {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

.flag-icon {
  width: 18px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.page-content {
  padding: 100px 0;
}

li{
  line-height:1.65;
  margin-left: 2.5rem;
}



@media(min-width:900px){
  .hero{
    grid-template-columns:1fr 1fr;
  }
  .cards{
    grid-template-columns:repeat(3,1fr);
  }
  .pricing{
    grid-template-columns:repeat(3,1fr);
  }
}



/* =========================
   HERO PREMIUM
========================= */

.hero {
  position: relative;

  min-height: 100vh; /* prend toute la hauteur écran */
  display: flex;
  align-items: center;

  padding: 140px 0 100px 0;

  background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #f5fbf7 60%,
      #ffffff 100%
  );

  overflow: hidden;
}

.hero-container {
  width: 92%;
  max-width: 1200px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  align-items: center;
}

.hero-content {
  max-width: 620px;
}

.hero h1 {
  font-size: 3.2rem;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 24px;
}

.text-success {
  color: var(--green-dark);
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-gray);
  margin-bottom: 40px;
}

.hero-actions .btn-primary {
  font-size: 1rem;
  padding: 16px 32px;
}

.hero-micro {
  font-size: 0.85rem;
  color: #777;
  margin-top: 18px;
}

/* =========================
   VISUEL + FORMES FLOUES
========================= */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  position: relative;
  width: 100%;
  max-width: 650px;
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.15);
  z-index: 3;
}

/* Formes floues */

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  z-index: 1;
}

.shape-1 {
  width: 300px;
  height: 300px;
  background: var(--green-light);
  top: -40px;
  right: 80px;
}

.shape-2 {
  width: 250px;
  height: 250px;
  background: var(--green-dark);
  bottom: -60px;
  left: 60px;
  opacity: 0.4;
}

/* =========================
   RESPONSIVE
========================= */

@media (min-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr 1fr;
  }

  .hero h1 {
    font-size: 3.6rem;
  }
}

/* ==========================
   SECTION CGU - PRIVACY - COOKIES
========================== */
nav.toc { background: #f9fafb; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1.5rem 0 2rem; }
nav.toc strong { display:block; margin-bottom:.5rem; }
nav.toc ol { margin:0; padding-left:1.25rem; }
code.placeholder { background: #f1f5f9; border: 1px dashed #cbd5e1; padding: .1rem .35rem; border-radius: 6px; font-size: .95em; }
.back-top { display: inline-block; margin-top: .75rem; margin-bottom: 1.5rem; font-size: .9rem; color: var(--accent); text-decoration: none; }
.subtitle { color: var(--muted); margin: 0; }
.meta { margin-top: .75rem; font-size: .95rem; color: var(--muted); }

/* Impression */
@media print {
    nav.toc { page-break-after: avoid; background: none; border: none; }
    section { page-break-inside: avoid; }
    a { color: black; text-decoration: none; }
    .site-header { display: none; }
    .footer { display: none; }
    .back-top { display: none; }
}