/* Règles propres à la page « parcours-soin » — engendré depuis maquette/corps/parcours-soin.css */
/* =====================================================================================
   PAGE « PARCOURS DE SOINS » — trois bandes propres à la page :
     1. l'introduction (titre + 3 étapes + photo)  : 1034 px de haut
     2. « Réunions de concertation » (dégradé)      :  619 px
     3. « Foire aux questions – FAQ »               :  434 px
   Toutes les valeurs verticales sont RELEVÉES sur le site d'origine à 1440 px, pas
   estimées : cartes à y=504, pastilles à y=456, photo à y=730, pilules FAQ de 64 px.
   ===================================================================================== */

/* --- 1. Bande d'introduction ----------------------------------------------------------
   Le pictogramme est servi en SVG sans dimensions propres : la largeur est imposée ici,
   sinon le navigateur lui donne sa taille par défaut et tout le bloc se décale.        */
body[data-page="parcours-soin"] .parcours-picto {
  display: block;
  width: 75.6px; height: auto;
  margin: 0;
}
/* Sur-titre de 14 px, calé 14 px sous le pictogramme. */
body[data-page="parcours-soin"] .parcours-surtitre {
  margin: 14px 0 0;
  font-size: 14px; line-height: 14px;
  color: var(--nuit);
}
body[data-page="parcours-soin"] .parcours-titre {
  margin: 20px 0 0;
  font-family: var(--pile);
  font-size: 53px; line-height: 40px;
  color: var(--nuit);
}
body[data-page="parcours-soin"] .parcours-soustitre {
  margin: 12px 0 10px;
  font-size: 24px; line-height: 24px;
  color: var(--nuit);
}

/* --- Les trois étapes -------------------------------------------------------------------
   Trois colonnes de 338 px séparées par 33 px : c'est la gouttière « resserrée » de la
   rangée d'origine (1080 = 3 × 338 + 2 × 33).                                            */
body[data-page="parcours-soin"] .etapes {
  margin: 0; padding: 0;
  list-style: none;
  gap: 32.39px;
}
/* La pastille chiffrée chevauche la carte de 30 px : elle reste au-dessus (z-index),
   et son retrait négatif remonte la carte sans changer la hauteur de la colonne. */
body[data-page="parcours-soin"] .etape-num {
  position: relative; z-index: 1;
  display: block;
  width: 78px; height: 78px;
  margin: 0 auto -30px;
}
body[data-page="parcours-soin"] .etape-corps {
  background: var(--blanc);
  border-radius: 30px;
  padding: 60px 20px 30px;
  text-align: center;
}
body[data-page="parcours-soin"] .etape-corps h3 {
  margin: 0 0 10px;
  font-size: 18px; line-height: 18px; font-weight: 700;
  color: var(--nuit);
}
body[data-page="parcours-soin"] .etape-corps p {
  margin: 0;
  font-size: 16px; line-height: 18px;
  color: var(--nuit);
}

/* La photo de la rangée basse est plus arrondie que les visuels courants (55 px mesurés). */
body[data-page="parcours-soin"] .parcours-photo { border-radius: 55px; }

/* --- 2. Bande « Réunions de concertation » ---------------------------------------------
   Illustration au trait centrée (432 px), puis le titre et la phrase de la bande.       */
body[data-page="parcours-soin"] .concertation-illus {
  display: block;
  width: 432px; max-width: 100%; height: auto;
  margin: 0 auto 29.7px;
}
body[data-page="parcours-soin"] .sec--concertation .titre-sec { margin-bottom: 14px; }

/* --- 3. Foire aux questions --------------------------------------------------------------
   La bande n'a pas de marge propre : ce sont les 27 px de la rangée qui l'ouvrent et la
   ferment. Question fermée = pilule grise de 64 px ; question ouverte = fond transparent. */
body[data-page="parcours-soin"] .sec--faq { padding: 0; }
body[data-page="parcours-soin"] .sec--faq .titre-sec { margin-bottom: 29.7px; }

body[data-page="parcours-soin"] .faq-item {
  background: rgba(0, 0, 0, .02);
  border-radius: 50px;
  padding: 20px;
  margin-bottom: 29.6875px;
}
body[data-page="parcours-soin"] .faq-item:last-child { margin-bottom: 0; }
body[data-page="parcours-soin"] .faq-item[open] { background: transparent; }

body[data-page="parcours-soin"] .faq-question {
  position: relative;
  display: block;               /* supprime la puce native de <summary> */
  list-style: none;
  cursor: pointer;
}
body[data-page="parcours-soin"] .faq-question::-webkit-details-marker { display: none; }
/* Le retrait qui réserve la place du « + » est porté par le titre, pas par le <summary> :
   la question garde ainsi la largeur de rangée relevée sur le site d'origine (1040 px). */
body[data-page="parcours-soin"] .faq-question h3 {
  margin: 0;
  padding-right: 50px;
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--gris-texte);
}
body[data-page="parcours-soin"] .faq-item[open] .faq-question h3 { color: var(--mauve); }

/* Le « + » mauve : pastille dessinée en SVG embarqué, donc aucun fichier à charger. */
body[data-page="parcours-soin"] .faq-question::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23b9a3ce'/%3E%3Cpath d='M9 4.6v8.8M4.6 9h8.8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
body[data-page="parcours-soin"] .faq-item[open] .faq-question::after { display: none; }
body[data-page="parcours-soin"] .faq-question:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Les navigateurs récents gardent le contenu d'un <details> fermé dans la page (masqué
   par « content-visibility »). On le retire vraiment du rendu, comme sur le site
   d'origine : sinon les réponses fermées sont lues par les outils de mesure et d'analyse. */
body[data-page="parcours-soin"] .faq-item:not([open]) .faq-reponse { display: none; }
body[data-page="parcours-soin"] .faq-reponse { padding-top: 20px; }
body[data-page="parcours-soin"] .faq-reponse p {
  margin: 0;
  font-size: 16px; line-height: 28.8px;
  color: var(--gris-texte);
}

/* --- Adaptatif ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body[data-page="parcours-soin"] .parcours-titre { font-size: 42px; line-height: 38px; }
  body[data-page="parcours-soin"] .parcours-soustitre { font-size: 21px; line-height: 24px; }
  body[data-page="parcours-soin"] .etapes { gap: 24px; }
  body[data-page="parcours-soin"] .parcours-photo { border-radius: 40px; }
}

@media (max-width: 767px) {
  body[data-page="parcours-soin"] .parcours-titre { font-size: 32px; line-height: 32px; }
  body[data-page="parcours-soin"] .parcours-soustitre { font-size: 19px; line-height: 22px; }
  body[data-page="parcours-soin"] .etapes { gap: 28px; }
  body[data-page="parcours-soin"] .concertation-illus { margin-bottom: 20px; }
  /* Une question tient rarement sur une ligne : la pilule redevient un bloc arrondi. */
  body[data-page="parcours-soin"] .faq-item { border-radius: 28px; margin-bottom: 16px; }
  body[data-page="parcours-soin"] .faq-question { padding-right: 34px; }
}

/* Recalage après correction des métriques de fonte du socle (les surcharges
   ascent/descent ne s'appliquent plus qu'à degulardisplay-regular, comme dans le
   thème d'origine). Écarts mesurés bande par bande avec diff-sections.js. */
body[data-page="parcours-soin"] .sec--concertation { padding-bottom: 51px; }