/* ==========================================================
   Page Accompagnements (hub des trois approches)
   Réutilise les cartes camaïeu .trois-chemins de charte.css.
   ========================================================== */
body.page-accompagnements main h1 {
  color: #241C17;
}
body.page-accompagnements main h2 {
  padding-top: 3rem;
  margin-bottom: 2.5rem;
}
body.page-accompagnements main h3 {
  color: #6B4A3D;
}

.hub-bloc {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
}
.hub-bloc--large {
  max-width: 1000px;
}
/* FAQ et avis gardent la largeur de lecture des autres pages */
.hub-bloc--large .faq-accordeon,
.hub-bloc--large .encart-autres-questions {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

#approches,
#choisir,
#faq,
#avis {
  scroll-margin-top: calc(var(--hauteur-header, 84px) + 24px);
}

/* Cartes */
.hub-cartes {
  margin: 0 auto 2.5rem;
  align-items: stretch;
}
.hub-carte {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.hub-carte:hover { transform: none; }
.hub-carte > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: .8;
}
.hub-carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.6rem;
}
.hub-carte__corps h3 {
  font-size: 1.25rem;
  margin: 0 0 .6rem;
}
.hub-carte__corps p {
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .8rem;
}
.hub-carte__amene {
  font-weight: 600;
  margin-bottom: .3rem !important;
}
.hub-carte__corps ul {
  margin: 0 0 .9rem;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.5;
  color: #3c332c;
}
.hub-carte__corps li { margin-bottom: .25rem; }
.hub-carte__modalite {
  font-size: .85rem !important;
  color: #6b6058;
  font-style: italic;
}
.hub-carte__lien {
  margin-top: auto;
  align-self: flex-start;
  color: var(--terracotta-fonce);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.hub-carte__lien:hover,
.hub-carte__lien:focus-visible {
  color: var(--terracotta);
}

/* Repères « comment choisir » */
.hub-reperes {
  margin: 1rem 0 2rem;
  padding-left: 1.2rem;
  line-height: 1.6;
}
.hub-reperes li { margin-bottom: .6rem; }
.hub-reperes a { color: var(--terracotta-fonce); font-weight: 600; }

@media (max-width: 700px) {
  .hub-bloc { padding: 0 1.1rem; }
}