:root{ --accent: var(--accent-nature); --accentSoft: rgba(47,133,90,.14); }

/* ===== Accueil SIM Nature — reprise au plus proche du contenu WordPress ===== */

/* Hero type "cover" (texte blanc + léger voile) */
.hero.heroCoverNature{
  min-height: 420px;
  padding: 0;
  display:flex;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(15,23,42,.62), rgba(15,23,42,.26)),
    var(--hero-image);
  background-size: cover;
  background-position: var(--hero-pos, center);
}
.heroCoverInner{ padding: 34px 22px; }
.coverTitle{
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 48px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  max-width: 22ch;
}

/* Boutons "WP" */
.wpBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid transparent;
  color:#fff;
  font-weight: 700;
  background: var(--accent);
}
.wpBtnSmall{ font-size:.92rem; padding: 10px 14px; }
.wpBtnSage{ background:#889e7e; border-radius:7px; }
.wpBtnDark{ background:#323232; border-radius:14px; }
/* Espace entre les 2 mots dans les boutons en inline-flex */
.wpBtn strong + strong{
  margin-left: .28em;
}


/* Espacers */
.spacer20{ height:20px; }
.spacer10{ height:10px; }

/* Media blocks (équivalent Media & Text WP) */
.natureHomeContent{ padding: 22px; }
.mediaBlock{
  display:grid;
  gap: 22px;
  align-items:center;
  /*
    Rythme vertical plus "premium" : on aère légèrement chaque bloc
    (sans toucher aux séparateurs) pour améliorer la lisibilité et la perception
    de qualité.
  */
  padding: 30px 0;
}
.mediaBlock.mediaRight{ grid-template-columns: 1fr var(--mediaWidth, 40%); }
.mediaBlock.mediaLeft{ grid-template-columns: var(--mediaWidth, 37%) 1fr; }

.mediaText h2{ margin: 0 0 12px; font-size: 1.35rem; }
.mediaText p{ margin: 0 0 12px; line-height: var(--lh-base); }
.mediaText ul{ margin: 0; padding-left: 18px; }
.mediaText li{ margin: 6px 0; line-height: var(--lh-base); }
.lead{ font-size: 20px; }

/* Hiérarchie + séparateurs (accueil Nature) */
.chapo{ margin: 0 0 6px; }

.keypoints{
  margin: 0 0 14px;
  padding-left: 18px;
}
.keypoints li{ margin: 8px 0; }

/* Séparateurs entre blocs — v1.5.7 : très sobres, plus foncés, moins larges
   NOTE : on force volontairement les propriétés (important) pour éviter qu’un
   style d’HR ailleurs ou un cache partiel ne donne l’impression que “ça ne change pas”. */
.homeSep,
.sectionSep{
  border: 0 !important;
  height: 0 !important;
  margin: 0 auto !important;
  width: min(620px, 84%) !important;
  display: block !important;
  background: none !important;
  border-top: 1px solid rgba(0,0,0,.38) !important;
}

@media (max-width: 520px){
  .homeSep,
  .sectionSep{
    width: 88% !important;
  }
}

.mediaImg img{
  width:100%;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
}

/* Sur mobile : empiler (comme Intervention) */
@media (max-width: 900px){
  /*
    IMPORTANT : les règles .mediaBlock.mediaLeft / .mediaBlock.mediaRight
    sont plus spécifiques que .mediaBlock.
    On force donc l’empilement sur les 3 sélecteurs.
  */
  .mediaBlock,
  .mediaBlock.mediaLeft,
  .mediaBlock.mediaRight{
    grid-template-columns: 1fr;
    padding: 22px 0;
  }

  /* Sur mobile : texte puis image (lecture naturelle : texte → visuel) */
  .mediaBlock .mediaText{ order: 1; }
  .mediaBlock .mediaImg{ order: 2; }
}

/* Latest posts */
.latestPosts ul{ margin: 0; padding-left: 18px; }
.latestPosts a{ color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* Cover CTA commande groupée */
.coverCta{
  position:relative;
  min-height: 261px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px 22px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.50)),
    var(--cover-image);
  background-size: cover;
  background-position:center;
}
.coverCtaInner{ max-width: 78ch; }
.coverCtaText{
  margin: 0 0 14px;
  color:#fff;
  font-size: 20px;
  line-height: 1.45;
}

/* News */
.sep{
  border:0;
  border-top: 1px solid rgba(15,23,42,.16);
  margin: 0;
}
.newsSection{ padding: 26px 22px; }
.newsTitle{ margin: 18px 0 18px; }
.newsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1050px){ .newsGrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .newsGrid{ grid-template-columns: 1fr; } }
.newsCard{
  padding: 0;
}
.newsCard img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
}
.newsCard h3{ margin: 12px 0 8px; font-size: 1.05rem; }
.newsCard p{ margin: 0 0 10px; color: var(--muted); line-height:1.45; }
.newsCard a{ text-decoration: underline; text-underline-offset:2px; }

/* Testimonials */
.testimonialsBand{
  padding: 0;
  background: rgba(15,23,42,.03);
}
.testimonialsGrid{
  display:grid;
  grid-template-columns: 30% 70%;
  gap: 18px;
  padding: 26px 22px;
}
@media (max-width: 900px){
  .testimonialsGrid{ grid-template-columns: 1fr; }
}
.testimonialsIntro h3{
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
}
.testimonialsList{
  display:grid;
  gap: 18px;
}
.stars{ letter-spacing: 2px; font-size: 18px; }
.quote{ margin: 10px 0 10px; font-size: 18px; line-height: 1.5; }
.author{ margin: 0; color: var(--muted); font-size: 16px; }