/* ---------------------------------------------------------------------------
 * ma-pratique.css — page /ma-pratique/. Chargé après index-*.css et refinements.css.
 * Composants communs : .facts-strip, .sticky-cta, .booking-band, .faq-list,
 * échelle de titres (refinements.css : ne pas régler de font-size sur les Hn).
 * Phase 1 : héro (bande prix/avis) et compaction mobile.
 * Phase 2 : liens du cadre professionnel, section FAQ.
 * ------------------------------------------------------------------------- */

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

/* Cadre professionnel (fond forêt) : liens texte vers la visio et l'EMDR.
   .text-link est forêt sur fond clair dans le CSS de base ; ici ivoire,
   souligné sable, focus sable. */
.practice-grounding__frame .practice-grounding__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin-top: 1.8rem;
  font-size: 0.95rem;
}

.practice-grounding__frame .text-link {
  color: var(--ivory-light);
  border-bottom-color: var(--sand);
}

.practice-grounding__frame .text-link:hover,
.practice-grounding__frame .text-link:focus-visible {
  border-bottom-color: var(--ivory-light);
}

.practice-grounding__frame a:focus-visible {
  outline-color: var(--sand);
}

/* FAQ : section .section--sage commune (vague dessinée par le CSS de base).
   Pas de conteneur hpi-wrap sur cette page : le contenu s'aligne sur la
   colonne de 92 rem des autres sections, avec le rythme vertical --section-y. */
.practice-faq {
  padding: var(--section-y) max(7vw, calc(50% - 46rem));
}

.practice-faq__heading {
  max-width: 40rem;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.practice-faq__heading h2 {
  margin: 0;
  color: var(--forest);
  text-wrap: balance;
}

.practice-faq .faq-list {
  max-width: 58rem;
  margin-top: 0;
}

/* MOBILE : cartes à hauteur minimale fixe (20 rem / 18 rem jusqu'à 680 px dans
   la feuille de base) et sections espacées de 7 à 11 rem : la page faisait
   une quinzaine d'écrans. */
@media (max-width: 820px) {
  .practice-method__layer,
  .practice-method__layer--person,
  .practice-method__layer--contexts,
  .practice-method__layer--movement,
  .practice-grounding__approaches article,
  .practice-grounding__approaches article:first-child,
  .practice-grounding__approaches article:nth-child(2),
  .practice-grounding__approaches article:nth-child(3),
  .practice-grounding__approaches article:nth-child(4) {
    min-height: 0;
  }

  /* Le relief forêt (vague) occupe les 5 rem du bas du héro : on garde
     6,5 rem en bas pour ne pas le faire chevaucher la légende du portrait. */
  .practice-hero {
    padding-top: 3.5rem;
    padding-bottom: 6.5rem;
  }

  .practice-method,
  .practice-grounding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Blocs internes des sections : 4,5 à 6 rem d'écart dans la feuille de base. */
  .practice-method__layers,
  .practice-method__session,
  .practice-method__quote,
  .practice-grounding__approaches,
  .practice-grounding__base {
    margin-top: 3rem;
  }

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