/* ---------------------------------------------------------------------------
 * accueil.css — page d'accueil. Chargé après index-*.css, refinements.css et
 * hero-accents.css. Composants communs : .facts-strip, .acc-specific,
 * .sticky-cta (refinements.css).
 * ------------------------------------------------------------------------- */

.hero .facts-strip {
  margin-top: 1.4rem;
}

/* Vignettes des 4 cartes : pictogrammes communs (.picto, refinements.css) et
   motif EMDR (même dessin que la page /emdr/), sur le fond dégradé commun
   .picto-frame. La vignette garde sa forme organique (index-*.css) : on
   restaure son border-radius, que .picto-frame ramène sinon à --r-m. */
.accompaniment-card__vignette.picto-frame {
  border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%;
}

/* .accompaniment-card svg (index-*.css) réduit toute icône à 1,25 rem et lui
   donne un trait currentColor, que les aplats des pictos ne doivent pas hériter.
   Les pictos (dessin sur 30-178 du viewBox) sont ramenés à l'intérieur de
   l'anneau (:after, inset 8 %) par un padding ; le motif EMDR tient déjà. */
.accompaniment-card .picto,
.accompaniment-card .emdr-mini {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  stroke: none;
  transition: transform 0.42s;
}

.accompaniment-card .picto {
  padding: 9%;
}

/* Même léger zoom au survol que les anciennes images (index-*.css). */
.accompaniment-card:hover .accompaniment-card__vignette .picto,
.accompaniment-card:hover .accompaniment-card__vignette .emdr-mini {
  transform: scale(1.04);
}

.emdr-mini__track {
  fill: none;
  stroke: var(--sand);
  stroke-width: 4;
  stroke-linecap: round;
}

.emdr-mini__ghost,
.emdr-mini__dot {
  fill: var(--terracotta);
}

.emdr-mini__eye {
  fill: #fbf7ef;
  stroke: var(--forest);
  stroke-width: 4;
  stroke-linejoin: round;
}

.emdr-mini__iris {
  fill: var(--forest);
}

.emdr-mini__wave {
  fill: none;
  stroke: var(--forest);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Grille des accompagnements spécifiques, sous les 4 cartes. */
.acc-specific--home {
  max-width: 88rem;
  margin-right: auto;
  margin-left: auto;
}

.acc-specific--home a {
  background: #fbf7efb3;
}

/* Bandeau final (.booking-band, index-*.css) : ici le paragraphe est suivi du
   lien « Me contacter d’abord », il n’est donc plus « p:last-child » ; on lui
   rend ses styles, et le lien passe en ivoire sur le fond terracotta. */
.booking-band h2 + p {
  max-width: 43rem;
  margin: 1rem 0 0;
  color: #ffffffc7;
}

.booking-band .text-link {
  margin-top: 1.4rem;
  color: var(--ivory);
  border-bottom-color: var(--ivory);
}

/* Section avis : note de sourcing sous la grille (même texte que /visio/),
   puis « Lire tous les avis » et « Laisser un avis » côte à côte. */
.reviews-section__note {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 46rem;
  margin: 2rem 0 0;
}

.reviews-section__note ~ .reviews-section__link {
  margin-top: 1.6rem;
}

.reviews-section__link--write {
  margin-left: 2rem;
}

@media (max-width: 560px) {
  .reviews-section__link--write {
    margin-left: 0;
  }
}

/* MOBILE : sections et cartes plus compactes (la page faisait 14 écrans). */
@media (max-width: 820px) {
  main > .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .journey-intro__heading {
    margin-bottom: 2rem;
  }

  .journey-step {
    padding-top: 3.2rem;
    padding-bottom: 0.5rem;
  }

  .accompaniment-grid {
    gap: 0;
  }

  .accompaniment-card {
    padding: 1.4rem 0;
  }

  .accompaniment-card__body {
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    margin-top: 1rem;
  }

  .accompaniment-card__vignette {
    width: 4.5rem;
  }

  .accompaniment-card h3 {
    font-size: 1.45rem;
  }

  .accompaniment-card__body > div:last-child > p:last-child {
    margin-top: 0.7rem;
    font-size: 0.88rem;
    line-height: 1.6;
  }

  .practice-portrait {
    width: min(16rem, 72vw);
  }
}

/* Petit mobile : la phrase de positionnement cède la place à la bande
   prix/avis, qui remonte ainsi dans le premier écran. */
@media (max-width: 560px) {
  .hero__note {
    display: none;
  }
}