.hero-photo {
  background-color: var(--cream);
  background-image: url('/assets/hero-thanadoula-sans-personne.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-note {
  color: var(--ink);
  text-shadow: none;
}

.hero-card > .eyebrow {
  display: inline-block;
  transform: translateY(-20px);
  margin-bottom: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(184, 104, 70, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* Lisibilité des textes courants
   Taille harmonisée sur le paragraphe d'introduction de l'accompagnement. */
.hero-card .lead,
.intro-grid p,
.section-heading > p:not(.eyebrow),
.cards article p,
.notice p,
.relatives-copy > p,
.support-grid article span,
.timeline article p,
.faq details p,
.pricing > div > p:not(.eyebrow),
.price-card p,
.price-card span,
.contact > div > p:not(.eyebrow):not(.location),
.contact form label,
.contact form input,
.contact form textarea {
  font-size: clamp(1.25rem, 1.35vw, 1.38rem);
  line-height: 1.72;
}

.site-header nav a,
.menu-button,
.button,
.text-link,
.hero-note,
.location,
footer {
  font-size: 1.08rem;
  line-height: 1.55;
}

.brand small,
.eyebrow {
  font-size: 1rem;
  line-height: 1.45;
}

.cards article p,
.support-grid article span,
.timeline article p,
.faq details p,
.notice p {
  margin-top: 0.75rem;
}

@media (max-width: 950px) {
  .hero-photo {
    min-height: min(82vw, 460px);
    background-image: url('/assets/hero-thanadoula-sans-personne.png');
    background-position: center 52%;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .hero-card {
    padding-left: 24px;
    padding-right: 24px;
    text-align: center;
  }

  .hero-card .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-card .hero-actions {
    justify-content: center;
    align-items: center;
  }

  .hero-note {
    position: static;
    padding: 0 30px 18px;
    margin: 0;
    color: var(--ink);
    text-shadow: none;
    background: var(--cream);
  }

  .hero-card > .eyebrow {
    position: relative;
    z-index: 2;
    transform: none;
    max-width: 100%;
    margin-bottom: 14px;
    font-size: 1.05rem;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .hero-card .lead,
  .intro-grid p,
  .section-heading > p:not(.eyebrow),
  .cards article p,
  .notice p,
  .relatives-copy > p,
  .support-grid article span,
  .timeline article p,
  .faq details p,
  .pricing > div > p:not(.eyebrow),
  .price-card p,
  .price-card span,
  .contact > div > p:not(.eyebrow):not(.location),
  .contact form label,
  .contact form input,
  .contact form textarea {
    font-size: 1.16rem;
    line-height: 1.68;
  }

  .site-header nav a,
  .menu-button,
  .button,
  .text-link,
  .hero-note,
  .location,
  footer {
    font-size: 1.05rem;
  }

  .hero-card .hero-actions {
    align-items: center;
  }
}