/* =========================================================
   Fiche Pathologie V2 (Atomic) — Védas
   La mise en page / couleurs / typo sont dans les classes atomiques du modèle.
   Ce fichier ne gère que : contenus des shortcodes, sections vides, motifs, sommaire.
   ========================================================= */
:root {
	--vp-plum: #602239;
	--vp-rasp: #bd1f5a;
	--vp-pink: #ecc8d6;
	--vp-gray: #f4f4f4;
	--vp-text: #333333;
	--vp-motif-w: url("../img/cta-motif-grand-blanc-30.svg");
	--vp-motif-b: url("../img/cta-motif-petit-bordeaux-9.svg");
}
body.single-pathologie { overflow-x: clip; }

/* ---------- Sections vides masquées (hors éditeur) ---------- */
body:not(.elementor-editor-active) :is(#definition, #diagnostic, #traitement, #apres, #vp-causes, #vp-symptomes,
	#vp-etapes, #vp-etape-avant, #vp-etape-jour, #vp-etape-suites, #vp-option-2, #vp-option-3, #vp-chirurgie):not(:has(.vp2-filled)) { display: none; }
body:not(.elementor-editor-active) #options:not(:has(#vp-option-1 .vp2-filled)) { display: none; }
body:not(.elementor-editor-active) #vp-related:not(:has(.e-loop-item)) { display: none; }

/* ---------- Contenus WYSIWYG ---------- */
.vp2-prose { font-family: "Host Grotesk", sans-serif; font-size: 17px; line-height: 1.7; color: var(--vp-text); }
.vp2-prose p { margin: 0 0 16px; }
.vp2-prose p:last-child { margin-bottom: 0; }
.vp2-prose strong { color: var(--vp-plum); font-weight: 600; }
.vp2-prose ul { list-style: none; padding: 0; margin: 0 0 16px; }
.vp2-prose li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.vp2-prose li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--vp-rasp); }
.vp2-prose h3 { color: var(--vp-plum); font-size: 21px; font-weight: 500; margin: 24px 0 12px; }

/* Symptômes en cartes : <li><strong>Titre</strong> texte</li> */
.vp2-cards-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.vp2-cards-list li { background: var(--vp-gray); border-radius: 16px; padding: 24px; margin: 0; font-size: 15px; line-height: 1.55; }
.vp2-cards-list li::before { display: none; }
.vp2-cards-list li strong { display: block; margin-bottom: 8px; font-size: 16px; line-height: 1.3; }

/* Textes sur fond foncé (carte Traitement) */
.vp2-traitement__intro, .vp2-step__text { color: #fff; }
.vp2-traitement__intro { max-width: 62ch; margin: 0 auto 32px; text-align: center; }
.vp2-traitement__intro strong, .vp2-step__text strong { color: #fff; }
.vp2-step__text { font-size: 15px; line-height: 1.55; }
.vp2-option__text { font-size: 15px; line-height: 1.55; }
.vp2-center { max-width: 62ch; margin-inline: auto; text-align: center; }
.vp2-note { text-align: center; font-size: 14px; color: #6b6b6b; }

/* ---------- Sommaire ---------- */
.vp2-toc-list { list-style: none; margin: 0; padding: 0; font-family: "Host Grotesk", sans-serif; }
.vp2-toc-list li { border-bottom: 1px solid #e6e6e6; }
.vp2-toc-list li:last-child { border-bottom: 0; }
.vp2-toc-list a { display: block; padding: 8px 0; font-size: 15px; color: var(--vp-text); text-decoration: none; }
.vp2-toc-list a:hover { color: var(--vp-plum); }
html { scroll-behavior: smooth; }
:is(#definition, #diagnostic, #traitement, #options, #apres) { scroll-margin-top: 24px; }

/* ---------- Fiche SFO ---------- */
.vp2-sfo { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 16px 20px; border: 1.5px solid #d9d9d9; border-radius: 24px; color: var(--vp-plum); text-decoration: none; font-family: "Host Grotesk", sans-serif; }
.vp2-sfo:hover { border-color: var(--vp-plum); }
.vp2-sfo__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vp-pink); font-size: 12px; font-weight: 600; }
.vp2-sfo strong { display: block; font-weight: 600; }
.vp2-sfo small { color: #6b6b6b; font-size: 14px; }

/* ---------- Chirurgie associée ---------- */
.vp2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 1180px; margin-inline: auto; width: 100%; color: #fff; font-family: "Host Grotesk", sans-serif; }
.vp2-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vp2-overline { font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--vp-pink); }
.vp2-split__title { margin: 0; color: #fff; font-size: clamp(30px, 3vw, 40px); line-height: 1.15; font-weight: 500; }
.vp2-split__text p { margin: 0; max-width: 48ch; }
.vp2-split__link { color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; }
.vp2-split__img, .vp2-split__placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 40px; display: block; background: #d9d9d9; }

/* ---------- Motifs logo ---------- */
#vp-chirurgie::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: 480px; aspect-ratio: 280 / 274; right: -120px; top: -90px;
	background: var(--vp-motif-w) no-repeat center / contain;
}
#definition::after, #options::after, #vp-related::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 280 / 274;
	background: var(--vp-motif-b) no-repeat center / contain;
}
#definition::after { width: 620px; top: 0; right: -310px; }
#options::after    { width: 560px; top: 20px; left: -280px; }
#vp-related::after { width: 520px; top: 40px; right: -260px; }

/* ---------- Tablette / mobile ---------- */
@media (max-width: 1024px) {
	.vp2-split { grid-template-columns: minmax(0, 1fr); }
	#definition::after, #options::after, #vp-related::after { display: none; }
}
@media (max-width: 767px) {
	.vp2-cards-list ul { grid-template-columns: minmax(0, 1fr); }
}