/* Logo margin via CSS (remplace l'inline style) */
header img.header-logo {
  margin-left: 10%;
}

@media (max-width: 768px) {
  /* Header : reset du margin logo */
  header img.header-logo {
    margin-left: 0;
  }

  /* Hero : titre correctement proportionné */
  .hero-cover {
    min-height: 380px;
  }
  .hero-cover h1 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
  }

  /* Content blocks : empilement vertical, suppression des min-width qui causent overflow */
  .content-block,
  .content-block.reverse {
    flex-direction: column;
  }
  .text-part,
  .image-part {
    min-width: 0;
    flex: 1 1 100%;
    width: 100%;
  }

  /* Font de base moins grand sur mobile */
  html {
    font-size: 16px;
  }

  /* Sections : padding latéral réduit */
  .section {
    padding: 2rem 1rem;
  }
  .cases-section,
  .method-section,
  .pricing-section,
  .testimonials-section,
  .about-section,
  .faq-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Témoignages : pleine largeur */
  .testimonial {
    width: 100%;
    max-width: 100%;
  }

  /* Offres : colonne unique */
  .pricing-cards {
    grid-template-columns: 1fr;
  }

  /* Calendrier embed : hauteur min lisible */
  #my-cal-inline {
    min-height: 600px;
  }
}

@media (max-width: 480px) {
  .hero-cover h1 {
    font-size: 1.35rem;
    line-height: 1.3;
  }
  .hero-cover > .hero-layer > p {
    font-size: 0.95rem !important;
  }
}

.btn-small {
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
}

/* Make pricing cards slightly wider */
.pricing-cards {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

/* Make entreprise cards as wide as index cards */
.harmo-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1000px;
}

@media (min-width: 1024px) {
  .pricing-cards,
  .harmo-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    max-width: 1100px;
  }
}

/* Card highlight: bigger, different bg, tagline not overlapping */
.offer.highlight {
  background: linear-gradient(160deg, #fffde4 0%, #fff8cc 100%);
  padding: 3rem 2.5rem 4rem;
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
  border: 3px solid #ffce32;
}
.offer.highlight:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 56px rgba(0,0,0,.22);
}
.offer .tagline {
  white-space: nowrap;
}

/* Hero overlay darker so paragraph text is readable */
.hero-cover::before { background: rgba(0,0,0,.52); }

/* ===== BLOG STYLES ===== */
.blog-section{background:#fff;padding:4rem 2rem;min-height:60vh}
.blog-container{max-width:1000px;margin:0 auto;text-align:center}
.blog-container h2{font-size:2rem;font-weight:800;margin-bottom:3rem;color:#108373}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:2rem}
.blog-post-card{background:#f8f8f8;border-radius:12px;padding:2rem;text-align:left;box-shadow:0 4px 10px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s}
.blog-post-card:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.blog-post-card h3{font-size:1.3rem;font-weight:700;margin-bottom:1rem;line-height:1.3}
.blog-post-card h3 a{color:#1c1c1c;text-decoration:none}
.blog-post-card h3 a:hover{color:#108373}
.blog-meta{font-size:.9rem;color:#666;margin-bottom:1rem;font-style:italic}
.blog-excerpt{color:#555;line-height:1.6;margin-bottom:1.5rem}
.read-more{color:#108373;font-weight:600;text-decoration:none;font-size:.95rem}
.read-more:hover{text-decoration:underline}
.loading,.error,.no-posts{text-align:center;padding:2rem;color:#666;font-style:italic}

/* ===== ARTICLE STYLES ===== */
.article-content{max-width:800px;margin:0 auto;padding:2rem;background:#fff;line-height:1.7}
.article-meta{text-align:center;color:#666;font-style:italic;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #eee}
.article-content h2{color:#108373;font-size:1.6rem;font-weight:700;margin-top:2.5rem;margin-bottom:1rem}
.article-content h3{color:#1c1c1c;font-size:1.3rem;font-weight:600;margin-top:2rem;margin-bottom:.8rem}
.article-content ul{margin:1rem 0 1.5rem 1.5rem}
.article-content ul li{margin-bottom:.5rem}
.article-content blockquote{background:#f8f8f8;border-left:4px solid #108373;padding:1rem 1.5rem;margin:1.5rem 0;font-style:italic;border-radius:0 8px 8px 0}
.example-box{background:#edf2f2;border-radius:8px;padding:1.5rem;margin:1.5rem 0}
.example-box h4{color:#108373;margin-bottom:1rem}
.testimonial-box{background:#f8f8f8;border-radius:8px;padding:1.5rem;margin:1.5rem 0;border-left:4px solid #ffce32}

/* Section "Derniers articles" pour la page d'accueil */
.latest-blog-section{background:#f8f8f8;padding:4rem 2rem;text-align:center}
.latest-blog-section h2{font-size:2rem;font-weight:800;margin-bottom:2rem;color:#108373}
.latest-blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1000px;margin:0 auto}
.latest-blog-card{background:#fff;border-radius:12px;padding:1.5rem;text-align:left;box-shadow:0 4px 10px rgba(0,0,0,.05);transition:transform .2s}
.latest-blog-card:hover{transform:translateY(-4px)}
.latest-blog-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.8rem;line-height:1.3}
.latest-blog-card h3 a{color:#1c1c1c;text-decoration:none}
.latest-blog-card h3 a:hover{color:#108373}
.latest-blog-card .blog-meta{font-size:.85rem;color:#666;margin-bottom:.8rem}
.latest-blog-card .blog-excerpt{font-size:.9rem;color:#555;line-height:1.5;margin-bottom:1rem}
.view-all-blog{display:inline-block;margin-top:2rem;background:#108373;color:#fff;padding:.9rem 2rem;border-radius:6px;font-weight:700;text-decoration:none;transition:background .2s}
.view-all-blog:hover{background:#0d6e63}