/* ---------------------------------------------------------------------------
 * accompagnements.css — page /accompagnements/ (page carrefour).
 * Chargé après index-*.css, refinements.css et hero-accents.css : ajuste la
 * mise en page d'origine (fil conducteur, chapitres en médaillon) pour une
 * page plus courte, avec des RDV tout au long du parcours et les prix.
 * Composants communs utilisés : .facts-strip, .sticky-cta, .acc-specific,
 * .m-collapse et la règle des liens de contenu (refinements.css).
 * ------------------------------------------------------------------------- */

/* HÉRO : moins haut, boutons + bande prix/avis ----------------------------- */
/* Deux colonnes : texte + illustration. hero-accents.css avait ramené la
   grille à une seule colonne tant que la colonne droite était vide. */
.accompaniments-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: center;
  min-height: 0;
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(6.5rem, 9vw, 9rem);
}

/* Cadre d'illustration, même modèle que /visio/ et /bilans/. */
.accompaniments-hero__art {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid #173c341f;
  border-radius: var(--r-l);
  background: radial-gradient(circle at 30% 25%, var(--ivory-light), var(--sage-light) 90%);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

/* Illustration : trois fils (enfant, adulte, famille) vers un point commun. */
.acc-art {
  display: block;
  width: 100%;
  height: 100%;
}

.acc-art__thread {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 2.4;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
}

.acc-art__source--jeune { fill: var(--sand); }
.acc-art__source--adulte { fill: var(--sand-light); }
.acc-art__source--famille { fill: var(--sage); }
.acc-art__forest { fill: var(--forest); }
.acc-art__ivory { fill: var(--ivory-light); }
.acc-art__halo { fill: var(--sand); opacity: 0.45; }
.acc-art__mark { fill: var(--forest); }
.acc-art__deco { fill: var(--terracotta); opacity: 0.55; }

.acc-art__letter {
  fill: var(--ivory-light);
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 400;
  text-anchor: middle;
}

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


.acc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

.acc-hero__actions .button {
  margin-top: 0;
}

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

/* PAR OÙ COMMENCER : 3 publics + accompagnements spécifiques --------------- */
.path-finder {
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.path-finder__choices {
  margin-top: clamp(2.2rem, 4vw, 3.5rem);
}

.path-finder__choices a {
  min-height: 0;
  padding-bottom: 3rem;
}

.path-finder__choices a:nth-child(2) {
  margin-top: 1.4rem;
}

.path-finder__choices a:nth-child(3) {
  margin-top: 2.8rem;
}

.path-finder__choices strong {
  margin-top: 1.4rem;
}

/* CHAPITRES : plus compacts, avec infos pratiques et RDV ------------------- */
.accompaniment-chapter {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}


.accompaniment-chapter__heading > .eyebrow {
  margin-bottom: 1rem;
}

/* Le paragraphe d'intro n'est plus le dernier enfant : on reprend son style. */
.accompaniment-chapter__heading > p:not(.eyebrow):not(.acc-chapter__meta) {
  max-width: 46rem;
  margin: 1.4rem 0 0;
  color: var(--muted);
}

.acc-chapter__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
}

.acc-chapter__meta span {
  padding: 0.4rem 0.85rem;
  border: 1px solid #173c3426;
  border-radius: 99px;
  background: #fbf7efb3;
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 600;
}

.acc-chapter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: 1.6rem;
}

.acc-chapter__actions .button {
  margin-top: 0;
}

/* Pictogrammes des publics (refinements.css) dans le médaillon organique :
   le conteneur reprend le rayon du médaillon et sa taille (carré, pleine
   largeur), comme l'ancienne vignette 360 × 360. */
.accompaniment-chapter__image .picto-frame {
  box-sizing: border-box;
  aspect-ratio: 1;
  padding: 7%;
  border-radius: inherit;
  overflow: hidden;
}

.accompaniment-chapter__details {
  display: block;
  padding: clamp(1.6rem, 3vw, 2.8rem);
}

/* Listes repliables : <details class="m-collapse"> (composant commun,
   refinements.css + site.js). Ici, seule la mise en page du contenu. */
.acc-more__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 7rem);
}

.accompaniment-chapter__details li {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.accompaniment-chapter__details li:before {
  top: 0.57rem;
}

/* ENCADRÉ « QUI VOUS ACCOMPAGNE » (composant commun, refinements.css), placé
   après le 3e chapitre : celui-ci garde déjà une large marge basse. */
.accompaniment-paths .practitioner-card {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* PARCOURS + PRIX ------------------------------------------------------------- */
.accompaniment-process ol {
  margin-bottom: 2.4rem;
}

.acc-prices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--ivory);
  overflow: hidden;
}

.acc-prices div {
  padding: 1rem 1.3rem;
  border-left: 1px solid var(--line);
}

.acc-prices div:first-child {
  border-left: 0;
}

.acc-prices dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.acc-prices dd {
  margin: 0.3rem 0 0;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.1;
}

.acc-prices dd small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
}

/* RESPONSIVE ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .acc-prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acc-prices div:nth-child(3) {
    border-left: 0;
  }

  .acc-prices div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 820px) {
  .accompaniments-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2.8rem;
    padding-bottom: 6rem;
  }

  /* L'illustration passe sous le texte, en plus petit. */
  .accompaniments-hero__art {
    max-width: 15rem;
    margin: 0 auto;
  }

  .acc-art__label {
    font-size: 18px;
  }


  .acc-hero__actions .button {
    width: 100%;
  }

  .path-finder__choices a,
  .path-finder__choices a:nth-child(2),
  .path-finder__choices a:nth-child(3) {
    margin-top: 1.2rem;
    padding: 1.2rem 2.5rem 1.2rem 0;
  }

  .path-finder__choices span {
    font-size: 1.4rem;
  }

  .path-finder__choices strong {
    margin-top: 0.4rem;
  }

  .path-finder__choices svg {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .accompaniment-chapter {
    padding: 3.5rem 0;
  }

  .accompaniment-chapter__marker {
    margin-bottom: 1.2rem;
  }


  .accompaniment-chapter__image,
  .accompaniment-chapter--2 .accompaniment-chapter__image {
    max-width: 11rem;
    margin: 2rem auto;
  }

  .acc-chapter__actions .button {
    width: 100%;
  }

  /* Le résumé .m-collapse dessine sa propre carte : l'encadré ivoire
     d'origine (fond + coins arrondis) est retiré pour ne pas le doubler. */
  .accompaniment-chapter__details {
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .acc-more__body {
    display: block;
    padding: 0 1.2rem;
  }

  .acc-more__body section + section {
    margin-top: 1.6rem;
  }

  .accompaniment-chapter__details li {
    font-size: 0.88rem;
  }

  .accompaniment-process li {
    min-height: 6rem;
  }
}

@media (max-width: 560px) {
  .acc-prices div {
    padding: 0.85rem 1rem;
  }

  .acc-prices dd {
    font-size: 1.35rem;
  }
}

/* Lien vers la page dédiée à chaque public (phase 4), en fin de chapitre. */
.accompaniment-chapter__more {
  margin: 1.4rem 0 0;
}

/* Photos des publics (phase 5) : le médaillon incliné devient le cadre photo
   commun (rectangle arrondi, droit) ; portrait 4:5, paysage pleine largeur sur mobile. */
.accompaniment-chapter .accompaniment-chapter__image:has(> img) {
  padding: 0;
  overflow: hidden;
  background: none;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  transform: none;
}

.accompaniment-chapter__image > img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-m);
}

@media (max-width: 820px) {
  .accompaniment-chapter .accompaniment-chapter__image:has(> img) {
    width: 100%;
    max-width: none;
    margin: 1.6rem 0;
  }

  .accompaniment-chapter__image > img {
    aspect-ratio: 3 / 2;
  }
}

/* Photo du héro (phase 5) : cadre photo commun, sans fond dégradé ni bordure ;
   portrait 4:5 recadré sur les vêtements (moitié gauche de la photo), paysage
   pleine largeur sur mobile. */
.accompaniments-hero__art--photo {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--r-m);
  background: none;
  box-shadow: var(--shadow-1);
}

.accompaniments-hero__art--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}

@media (max-width: 820px) {
  .accompaniments-hero__art--photo {
    max-width: none;
    aspect-ratio: 3 / 2;
  }
}