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

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

/* « sur devis » est plus long qu'un montant : compléments sous la valeur,
   pour garder trois colonnes équilibrées. */
.assessment-hero .facts-strip dd small {
  display: block;
  margin: 0.15rem 0 0;
}

/* Les 5 étapes sont désormais dans un <details class="m-collapse"> : on
   reporte les règles d'origine, écrites en enfant direct (process > ol). */
.assessment-reading__process > details > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.assessment-reading__process > details > ol > li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.2rem;
  padding: 1.35rem 0;
  border-top: 1px solid #f4ebdd26;
}

.assessment-reading__process > details > ol > li > span {
  color: #e2a38cd1;
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* Tarif sur devis : un vrai point d'entrée vers le rendez-vous. */
.assessment-practical__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
}

.assessment-practical__actions .button {
  margin-top: 0;
}

/* MOBILE : les sections gardaient 7 à 8 rem de marge (la page faisait
   16 écrans). */
@media (max-width: 820px) {
  .assessment-recognition,
  .assessment-formats,
  .assessment-reading,
  .assessment-deliverable,
  .assessment-scope,
  .assessment-practical {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }


  /* Deux formats */
  .assessment-format {
    padding: 1.6rem;
  }

  .assessment-format__number {
    margin-bottom: 1.2rem;
    font-size: 1.8rem;
  }

  .assessment-format h3 {
    font-size: 1.65rem;
  }

  /* Quatre dimensions */
  .assessment-reading__dimensions > ol {
    gap: 0.8rem;
  }

  .assessment-reading__dimensions > ol > li,
  .assessment-reading__dimensions > ol > li:nth-child(n) {
    padding: 1.2rem 1.3rem;
  }

  .assessment-reading__dimensions h4,
  .assessment-reading__process h4 {
    margin: 0.7rem 0 0.4rem;
    font-size: 1.45rem;
  }

  .assessment-reading__process > details > ol > li {
    padding: 1rem 0;
  }

  /* Aperçu du document remis : même contenu, format réduit. */
  .assessment-document {
    width: min(17rem, 80vw);
  }

  .assessment-document__page {
    min-height: 0;
    padding: 1.6rem 1.5rem 2.4rem;
  }

  .assessment-document__page > span {
    margin: 1.2rem 0;
  }

  .assessment-document h3 {
    font-size: 2rem;
  }

  .assessment-document dl {
    margin-top: 1.4rem;
  }

  .assessment-document small {
    margin-top: 1.2rem;
  }

  .assessment-practical__actions .button {
    width: 100%;
  }
}

/* ILLUSTRATION DU HÉRO ------------------------------------------------------ *
 * Remplace les trois cercles « Contexte / Besoins / Observations » : trois
 * sources (entretiens, observations, documents) reliées par des fils vers le
 * document remis, avec ses recommandations. Même série que /visio/ et /emdr/. */
.assessment-hero__visual--art {
  margin: 0;
}

.assessment-art {
  width: 100%;
  height: 100%;
  border-radius: 1.3rem;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, var(--ivory-light), var(--sage-light) 90%);
  box-shadow: 0 1.8rem 4rem #173c3424;
}

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

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

.bilan-art__source--a { fill: var(--sand); }
.bilan-art__source--b { fill: var(--sage); }
.bilan-art__source--c { fill: #efe3d2; }

.bilan-art__icon {
  fill: none;
  stroke: var(--forest);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bilan-art__iris { fill: var(--forest); }
.bilan-art__deco { fill: var(--terracotta); opacity: 0.5; }

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

/* Illustration réduite sur mobile : libellés agrandis pour rester lisibles. */
@media (max-width: 560px) {
  .bilan-art__label {
    font-size: 18px;
  }
}

.bilan-art__doc-back { fill: var(--terracotta); opacity: 0.75; }

.bilan-art__doc {
  fill: #fbf7ef;
  stroke: #173c3433;
  stroke-width: 1.5;
}

.bilan-art__doc-title {
  fill: none;
  stroke: var(--forest);
  stroke-width: 6;
  stroke-linecap: round;
}

.bilan-art__doc-line {
  fill: none;
  stroke: var(--sand);
  stroke-width: 4;
  stroke-linecap: round;
}

.bilan-art__tick {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .assessment-hero__visual--art {
    width: min(17rem, 80vw);
  }
}

/* TITRES (phase 2c) --------------------------------------------------------- *
 * « Les quatre dimensions et les cinq étapes du bilan » est plus long que
 * l'ancien H2 : le max-width de 13ch du CSS de base le coupait en cinq lignes. */
.assessment-reading__heading h2 {
  max-width: 24ch;
  text-wrap: balance;
}

/* ENCADRÉ « QUI VOUS ACCOMPAGNE » (phase 2c) -------------------------------- *
 * L'aside .practitioner-card est le troisième enfant de la grille à deux
 * colonnes de .assessment-practical : il occupe toute la largeur. Le bloc de
 * texte n'est plus « div:last-child » : on reporte ses règles d'origine. */
.assessment-practical > .practitioner-card {
  grid-column: 1 / -1;
  margin-top: 0;
}

.assessment-practical > div:nth-child(2) {
  align-self: end;
}

.assessment-practical > div:nth-child(2) > p {
  max-width: 42rem;
  color: var(--muted);
  margin: 0 0 2rem;
  line-height: 1.8;
}

/* Sur deux colonnes (le CSS de base passe à une colonne à 1080 px), le gap de
   la grille (jusqu'à 11 rem) ne sert qu'à espacer l'encadré : on le ramène à
   la marge habituelle du composant. */
@media (min-width: 1081px) {
  .assessment-practical {
    row-gap: clamp(2.5rem, 5vw, 4rem);
  }
}

/* PHOTO DU HÉRO (phase 5) ---------------------------------------------------- *
 * Cadre photo commun du site : portrait 4:5 (30 rem max) recadré sur les cahiers,
 * paysage pleine largeur sur mobile et tablette. */
.assessment-hero__visual--photo {
  width: min(100%, 30rem);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
}

.assessment-hero__visual--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

@media (max-width: 820px) {
  .assessment-hero__visual--photo {
    width: 100%;
    aspect-ratio: 3 / 2;
  }
}