/* Règles propres à la page « pathologie » — engendré depuis maquette/corps/pathologie.css */
/* Page « Pathologies traitées ».
   Toutes les valeurs sont relevées sur le site d'origine (voir reference/outline/pathologie.json) :
   le grand titre est un texte de 53 px sur 40 px d'interligne, le sur-titre un 14 px sur 23,8,
   les titres de famille des 24 px sur 24, et les deux boutons du bas font 204 px de large. */

/* --- Bande d'introduction ---------------------------------------------------------- */
body[data-page="pathologie"] .sec--patho-intro { background: #f7f6f7; padding: 54px 0; }
body[data-page="pathologie"] .sec--patho-intro > .rangee { padding: 27px 0; }

body[data-page="pathologie"] .patho-picto { display: block; width: 56px; height: auto; margin-bottom: 11px; }
body[data-page="pathologie"] .patho-surtitre {
  font-size: 14px; line-height: 23.8px; color: var(--nuit); margin: 0 0 9px;
}
body[data-page="pathologie"] .patho-titre {
  font-size: 53px; line-height: 40px; color: var(--nuit);
  margin: 0 0 17px; padding: 0; font-weight: 400;
}
body[data-page="pathologie"] .patho-chapo { margin-bottom: 30px; }
body[data-page="pathologie"] .patho-action { margin: 0; }
/* Bouton du haut de page : 208 px de large, calendrier à gauche du libellé.
   (Il porte bien un pictogramme sur l'original — le glyphe calendrier de la fonte
   d'icônes de Divi, invisible à faible zoom, d'où mon erreur de lecture initiale.) */
body[data-page="pathologie"] .btn--rdv { width: 208px; justify-content: center; padding: 20px; gap: 8px; }
body[data-page="pathologie"] .patho-photo { max-width: 510px; margin-left: auto; }
body[data-page="pathologie"] .patho-fleche { display: block; margin: 0 auto; width: 63px; height: auto; }

/* --- Les huit familles ------------------------------------------------------------- */
body[data-page="pathologie"] .sec--patho-familles { padding: 54px 0; overflow: hidden; }
body[data-page="pathologie"] .sec--patho-familles > .rangee { padding: 27px 0 0; }
body[data-page="pathologie"] .sec--patho-familles > .rangee:last-child { padding-bottom: 27px; }
body[data-page="pathologie"] .patho-familles { gap: 33px; margin-bottom: 45px; align-items: start; }
body[data-page="pathologie"] .rangee:last-child .patho-familles { margin-bottom: 0; }
body[data-page="pathologie"] .patho-icone { display: block; margin: 0 auto 16px; width: auto; max-height: 97px; }
body[data-page="pathologie"] .patho-famille-titre {
  font-size: 24px; line-height: 24px; color: var(--nuit);
  text-align: center; margin: 0 0 10px; font-weight: 400;
}

/* --- Vivre après le cancer ---------------------------------------------------------- */
body[data-page="pathologie"] .sec--patho-cancer { padding: 54px 0; overflow: hidden; }
body[data-page="pathologie"] .sec--patho-cancer > .rangee { padding: 27px 0 0; }
body[data-page="pathologie"] .sec--patho-cancer > .rangee:last-child { padding: 0 0 27px; }
/* Écarts mesurés sur l'original : 30 px sous le titre, 54 px avant les deux colonnes. */
body[data-page="pathologie"] .sec--patho-cancer .titre-sec { margin: 0 0 20px; padding-bottom: 10px; }
body[data-page="pathologie"] .sec--patho-cancer .patho-intro-cancer { margin-bottom: 54px; }
/* Divi pose 1em de retrait SOUS chaque paragraphe (et non une marge) : c'est ce qui
   sépare visuellement les trois blocs de cette colonne. */
body[data-page="pathologie"] .patho-cancer-texte p { margin-bottom: 0; padding-bottom: 16px; }
body[data-page="pathologie"] .patho-cancer-texte p:last-of-type { padding-bottom: 0; }
body[data-page="pathologie"] .patho-cancer-actions { display: flex; gap: 20px; margin-top: 29px; }
/* Les deux boutons de cette bande font exactement la même largeur sur l'original. */
body[data-page="pathologie"] .btn--patho { width: 204px; justify-content: center; padding: 20px; gap: 10px; }
body[data-page="pathologie"] .btn-picto { width: 18px; height: 18px; flex: none; }
body[data-page="pathologie"] .btn--contour-mauve {
  background: transparent; border: 1px solid var(--mauve); color: var(--mauve);
}
body[data-page="pathologie"] .patho-illus { display: block; width: 311px; height: auto; margin: 0 auto; }

/* --- Foire aux questions ------------------------------------------------------------
   L'original pilotait l'accordéon en JavaScript sur des blocs masqués ; ici ce sont des
   <details>/<summary> natifs. Mêmes tailles et mêmes couleurs : la question ouverte est
   mauve, les questions fermées grises. */
body[data-page="pathologie"] .sec--patho-faq { padding: 0; }
body[data-page="pathologie"] .sec--patho-faq > .rangee { padding: 27px 0 36px; }
body[data-page="pathologie"] .sec--patho-faq .titre-sec { margin: 0 0 20px; padding-bottom: 10px; }
/* Chaque question est un bloc très arrondi (rayon 50px, 20px de retrait) : gris très pâle
   quand elle est repliée, transparent quand elle est ouverte. Valeurs relevées sur
   l'original : fond rgba(0,0,0,.02), rayon 50px, retrait 20px, titre en 16px/24px graisse
   300, pastille mauve de 17px collée au bord droit. */
body[data-page="pathologie"] .faq-item {
  border: 0; border-radius: 50px; padding: 20px;
  background: rgba(0, 0, 0, .02);
  margin-bottom: 30px;
}
body[data-page="pathologie"] .faq-item[open] { background: transparent; }
body[data-page="pathologie"] .faq-item:last-child { margin-bottom: 0; }
body[data-page="pathologie"] .faq-question { cursor: pointer; list-style: none; }
body[data-page="pathologie"] .faq-question::-webkit-details-marker { display: none; }
body[data-page="pathologie"] .faq-question {
  position: relative; padding-right: 50px;
}
body[data-page="pathologie"] .faq-question h3 {
  display: inline; font-size: 16px; line-height: 24px; font-weight: 300; color: var(--gris-texte);
  margin: 0;
}
/* Pastille : cercle mauve plein, « + » blanc quand la question est repliée, « – » quand
   elle est ouverte. L'original utilisait un glyphe de la fonte d'icônes de Divi ; ici c'est
   du SVG en ligne, pour ne pas embarquer une fonte entière. */
body[data-page="pathologie"] .faq-question::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23B9A3CE'/%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Vérifié sur la capture d'origine à l'échelle 1 : la question DÉPLIÉE n'affiche aucune
   pastille. On reproduit ce comportement plutôt que d'ajouter un « – » qui n'existe pas. */
body[data-page="pathologie"] .faq-item[open] .faq-question::after { content: none; }
body[data-page="pathologie"] .faq-item[open] .faq-question h3 { color: var(--mauve); }
body[data-page="pathologie"] .faq-question:focus-visible { outline: 2px solid var(--nuit); outline-offset: 3px; }
body[data-page="pathologie"] .faq-item p {
  font-size: 16px; line-height: 28.8px; color: var(--gris-texte); margin: 20px 0 0;
}

@media (max-width: 767px) {
  body[data-page="pathologie"] .patho-titre { font-size: 36px; line-height: 34px; }
  body[data-page="pathologie"] .btn--rdv,
  body[data-page="pathologie"] .btn--patho { width: 100%; }
  body[data-page="pathologie"] .patho-cancer-actions { flex-direction: column; }
  body[data-page="pathologie"] .patho-familles { margin-bottom: 40px; }
}