/* ---------------------------------------------------------------------------
 * tarifs.css — page /tarifs/. Chargé après index-*.css et refinements.css.
 * Composants communs : .facts-strip, .faq-list, .m-collapse, .sticky-cta.
 * ------------------------------------------------------------------------- */

/* Bande prix + avis sous les boutons du héro (le composant a margin: 0). */
.tarifs-hero .facts-strip {
  margin-top: 1.6rem;
}

/* HÉRO — cadre d'illustration commun (même carte que .visio-hero__art,
 * .assessment-art et .emdr-hero__image--art dans refinements.css) : carré,
 * angles --r-l, filet, dégradé ivoire -> sauge, ombre --shadow-2. Le SVG
 * laisse le bas libre ; la légende s'y pose. */
.tarifs-hero__art {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  border-radius: var(--r-l);
  border: 1px solid #173c341f;
  background: radial-gradient(circle at 30% 25%, var(--ivory-light), var(--sage-light) 90%);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.tarifs-art {
  display: block;
  width: 100%;
  height: auto;
}

/* Série SVG commune : fil pointillé terracotta, traits forêt, libellés Inter. */
.tarifs-art__thread {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 2.4;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
}

.tarifs-art__face {
  fill: var(--ivory-light);
  stroke: var(--forest);
  stroke-width: 2.6;
}

.tarifs-art__tick {
  fill: none;
  stroke: var(--forest);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.7;
}

.tarifs-art__hand {
  fill: none;
  stroke: var(--forest);
  stroke-width: 3;
  stroke-linecap: round;
}

.tarifs-art__pin { fill: var(--forest); }
.tarifs-art__deco { fill: var(--terracotta); opacity: 0.5; }

.tarifs-art__label {
  fill: var(--forest);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-anchor: middle;
}

/* Légende dans le bas de la carte (les marges de dégagement de l'ancienne
 * scène, dans refinements.css, n'ont plus lieu d'être). */
.tarifs-hero__art .tarifs-hero__caption {
  position: absolute;
  inset: auto 0 0;
  width: auto;
  margin: 0;
  padding: 0 1.5rem 1.3rem;
  white-space: normal;
  font-size: 1.02rem;
  line-height: 1.3;
}

/* Titres de section : « Tarifs des séances : durée et prix » tient sur deux
 * lignes (13ch coupait après le deux-points). */
.tarifs-landscape__heading h2 {
  max-width: 22ch;
}

/* INFORMATIONS PRATIQUES — FAQ (.faq-list commun). La grille de la section
 * espace déjà l'en-tête et la liste (pas de marge en plus sous 820 px).
 * Réponse en deux paragraphes : espacement interne réduit. */
.tarifs-practical .faq-list {
  margin-top: 0;
}

.tarifs-practical .faq-list details p:not(:last-child) {
  padding-bottom: 0.8rem;
}

/* MOBILE -------------------------------------------------------------------- *
 * Le visuel du héro (carte SVG légère) reste affiché, réduit, après le texte.
 * Les cartes de tarif passent en lignes compactes (256 px chacune auparavant). */
@media (max-width: 620px) {
  .tarifs-hero {
    padding-bottom: 3.5rem;
  }

  .tarifs-hero__visual {
    width: min(100%, 15rem);
    margin: 0 auto;
  }

  .tarifs-art__label {
    font-size: 20px;
  }

  .tarifs-hero__art .tarifs-hero__caption {
    padding: 0 1rem 0.9rem;
    font-size: 0.8rem;
  }

  .tarifs-landscape,
  .tarifs-practical {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .tariff-choices {
    gap: 0.7rem;
  }

  .tariff-choice,
  .tariff-choice summary,
  .tariff-choice[open] summary {
    min-height: 0;
  }

  .tariff-choice summary {
    grid-template-columns: 2.8rem 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.15rem 0.9rem;
    padding: 1rem 1.1rem;
  }

  .tariff-choice__icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 2.8rem;
    height: 2.8rem;
  }

  .tariff-choice__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .tariff-choice__identity {
    grid-area: 1 / 2;
  }

  .tariff-choice__identity .eyebrow {
    margin-bottom: 0.1rem;
    font-size: 0.62rem;
  }

  .tariff-choice__identity strong {
    font-size: 1.2rem;
  }

  .tariff-choice__duration {
    grid-area: 2 / 2;
    align-self: start;
    font-size: 0.68rem;
  }

  .tariff-choice__price {
    grid-area: 1 / 3 / 3 / 4;
    align-self: center;
    font-size: 1.9rem;
  }

  .tariff-choice--quote .tariff-choice__price {
    font-size: 1.15rem;
  }

  .tariff-choice__toggle {
    display: none;
  }

  .tariff-choice__detail {
    padding: 0 1.1rem 1.1rem;
  }
}

/* PHOTO DU HÉRO (phase 5) ---------------------------------------------------- *
 * Cadre photo commun du site : portrait 4:5 (30 rem max) centré sur le sablier,
 * paysage pleine largeur sur mobile. La légende passe sous la photo (lisible
 * sans voile). « main » : l'emporte sur les règles communes des cartes carrées. */
main .tarifs-hero__art--photo {
  aspect-ratio: auto;
  max-width: 30rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

main .tarifs-hero__art--photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 45% 50%;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
}

main .tarifs-hero__art--photo .tarifs-hero__caption {
  position: static;
  padding: 1rem 0 0;
  text-align: center;
  font-size: 1.1rem;
}

@media (max-width: 820px) {
  main .tarifs-hero__visual:has(.tarifs-hero__art--photo) {
    width: 100%;
  }

  main .tarifs-hero__art--photo {
    max-width: none;
  }

  main .tarifs-hero__art--photo img {
    aspect-ratio: 3 / 2;
  }
}