/* ---------------------------------------------------------------------------
 * emdr.css — page /emdr/. Chargé après index-*.css et refinements.css.
 * Ajouts : bande prix/avis (composant .facts-strip), accroches sous les H2
 * du parcours et du bloc « pour qui », position de l'encadré praticienne
 * commun (.practitioner-card, refinements.css) après le parcours, bloc
 * urgence sur fond sable, parcours plus compact sur mobile, illustration
 * du héro.
 * ------------------------------------------------------------------------- */

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

/* ACCROCHES SOUS LES H2 -------------------------------------------------------
 * Le H2 nomme le sujet ; l'ancien titre devient une accroche en serif. */
.emdr-path__lead,
.emdr-scope__lead {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.4;
}

.emdr-path__lead em,
.emdr-scope__lead em {
  font-style: italic;
}

/* En-tête du parcours : la grille a un gap de 2 à 6 rem, trop large entre le
   H2 et son accroche → pas d'écart de rangée, marges explicites. */
.emdr-path__heading {
  row-gap: 0;
}

/* Bloc « pour qui » : l'accroche s'intercale entre le H2 et la liste. */
.emdr-scope__possible h2 {
  margin-bottom: 0;
}

.emdr-scope__lead {
  margin-bottom: 2.2rem;
}

/* Sur ordinateur (2 colonnes, refinements.css) : l'accroche reste en colonne 1
   sous le H2 ; le paragraphe d'intro occupe la colonne 2 sur la hauteur
   H2 + accroche. */
@media (min-width: 821px) {
  .emdr-path__heading .emdr-path__lead {
    grid-column: 1;
    align-self: start;
  }

  .emdr-path__heading > p:last-child {
    grid-row: 2 / span 2;
  }
}

/* ENCADRÉ PRATICIENNE (composant commun .practitioner-card) -------------------
   Sur ordinateur, la 4e étape est décalée de 9 rem : on dégage l'encadré. */
main .emdr-path .practitioner-card {
  margin-top: 12rem;
}

/* BLOC URGENCE DANS LA PAUSE ----------------------------------------------------
   .emdr-scope__pause est sur fond sable clair (#d8c4a9, cf. accessibilite.css) :
   la variante « fond sombre » de refinements.css y serait illisible → variante
   claire. Le paragraphe n'est plus :last-child de la pause : on garde son style. */
.emdr-scope__pause > h2 + p {
  margin: 0;
  color: #465049;
  line-height: 1.85;
}

main .emdr-scope__pause .urgence {
  background: var(--ivory-light);
  color: var(--ink);
}

main .emdr-scope__pause .urgence p {
  color: var(--muted);
}

main .emdr-scope__pause .urgence li b {
  color: var(--terracotta-dark);
}

/* Liens de contenu (FAQ) : règle commune dans refinements.css. */

/* RESPONSIVE ------------------------------------------------------------------ */
/* Mobile : les étapes ne sont plus décalées → encadré rapproché ; parcours
   plus compact (il occupait 2,6 écrans). */
@media (max-width: 820px) {
  .emdr-path {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .emdr-path__heading > p:last-child {
    margin-top: 1.6rem;
  }

  .emdr-path__steps {
    margin-top: 2.2rem;
  }

  .emdr-path__steps li,
  .emdr-path__steps li:nth-child(2n),
  .emdr-path__steps li:nth-child(odd),
  .emdr-path__steps li:nth-child(3) {
    grid-template-columns: 3.2rem 1fr;
    gap: 1rem;
    padding: 1.3rem 0;
  }

  .emdr-path__steps:before {
    left: 2.6rem;
  }

  .emdr-path__number {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1rem;
  }

  .emdr-path__steps li p:last-child {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  main .emdr-path .practitioner-card {
    margin-top: 2.5rem;
  }
}

/* ILLUSTRATION DU HÉRO ------------------------------------------------------ *
 * Remplace l'aquarelle (deux personnes en tailleur) : en haut, le point des
 * stimulations bilatérales suivi du regard ; en bas, une ligne agitée qui
 * s'apaise — « ne plus revivre avec la même intensité ». Le cadre en arche
 * (.emdr-hero__image, index-*.css) est conservé. */
.emdr-hero__image--art {
  background: radial-gradient(circle at 30% 20%, var(--ivory-light), var(--sage-light) 90%);
}

.emdr-art {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-1.4deg); /* compense la rotation du cadre */
}

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

.emdr-art__chevron {
  fill: none;
  stroke: var(--forest);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.emdr-art__ghost { fill: var(--terracotta); }
.emdr-art__dot { fill: var(--terracotta); }
.emdr-art__iris { fill: var(--forest); }
.emdr-art__glint { fill: #fbf7ef; }
.emdr-art__deco { fill: var(--terracotta); opacity: 0.5; }

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

.emdr-art__wave {
  fill: none;
  stroke: url(#emdr-art-calm);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emdr-art__stop--hot { stop-color: var(--terracotta); }
.emdr-art__stop--calm { stop-color: var(--forest); }

/* PHOTO DU HÉRO (phase 5) ---------------------------------------------------- *
 * Le cadre en arche incliné devient le cadre photo commun du site (rectangle
 * arrondi, droit) : portrait 4:5 plafonné à 30 rem, paysage pleine largeur sur
 * mobile. La légende (figcaption) reste sous la photo. */
.emdr-hero__visual:has(.emdr-hero__image--photo) {
  width: min(100%, 30rem);
}

.emdr-hero__image--photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  transform: none;
}

.emdr-hero__image--photo img {
  transform: none;
}

@media (max-width: 820px) {
  .emdr-hero__visual:has(.emdr-hero__image--photo) {
    width: 100%;
  }

  .emdr-hero__image--photo {
    aspect-ratio: 3 / 2;
  }
}