/* Radiographie interactive — Salubre */
.salubre-xray {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 28px;
	margin-top: 2rem;
	align-items: stretch;
}
.salubre-xray__scene,
.salubre-xray__detail {
	background: #132A1F;
	border: 1px solid #28382F;
	border-radius: 22px;
	padding: 20px;
}
.salubre-xray__scene svg { width: 100%; height: auto; display: block; }
.salubre-xray__detail { min-height: 320px; }

/* Toute la surface de l'objet est cliquable via la zone invisible .sx-hit */
.sx-item { cursor: pointer; outline: none; }
.sx-item .sx-hit {
	fill: transparent;
	stroke: transparent;
	pointer-events: all;
}
.sx-item:hover .sx-hit,
.sx-item:focus-visible .sx-hit {
	fill: rgb(25 194 130 / .05);
	stroke: rgb(25 194 130 / .3);
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
}
.sx-item.is-active .sx-hit {
	stroke: rgb(25 194 130 / .45);
	stroke-width: 1.5;
	stroke-dasharray: none;
}
.sx-item .sx-draw {
	stroke: #5E7A6C; stroke-width: 2.5; fill: none;
	stroke-linecap: round; stroke-linejoin: round;
	transition: stroke .2s;
	pointer-events: none;
}
.sx-item .sx-draw.sx-thin { stroke-width: 1.5; opacity: .65; }
.sx-item:hover .sx-draw,
.sx-item:focus-visible .sx-draw,
.sx-item.is-active .sx-draw { stroke: var(--wp--preset--color--green-bright, #19C282); }
.sx-item .sx-pulse { fill: var(--wp--preset--color--signal, #E23B26); pointer-events: none; }
.sx-item.is-active .sx-pulse { fill: var(--wp--preset--color--green-bright, #19C282); }
.sx-item .sx-halo {
	fill: var(--wp--preset--color--signal, #E23B26); opacity: .25;
	transform-origin: center; transform-box: fill-box;
	animation: sx-halo 2s infinite;
	pointer-events: none;
}
.sx-item.is-active .sx-halo { animation: none; opacity: 0; }
@keyframes sx-halo {
	0% { transform: scale(.6); opacity: .35; }
	70% { transform: scale(1.6); opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-item .sx-halo { animation: none; }
}
.sx-item text { fill: #7E958A; font-size: 11px; pointer-events: none; transition: fill .2s; }
.sx-item:hover text, .sx-item.is-active text { fill: #C4DACE; }

.salubre-xray__detail .sx-tag {
	display: inline-block; font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em;
	padding: 5px 12px; border-radius: 99px;
	background: rgb(226 59 38 / .15); color: #FF8A76;
}
.salubre-xray__detail h3 { color: #fff; font-size: 1.35rem; margin: .9rem 0 .2rem; }
.salubre-xray__detail .sx-risk { color: #FF8A76; font-weight: 700; font-size: .88rem; margin: 0; }
.salubre-xray__detail .sx-why { font-size: .9rem; color: #B7C7BE; margin: .8rem 0 0; line-height: 1.6; }
.salubre-xray__detail .sx-alt {
	margin-top: 1.1rem; padding: 1rem; border-radius: 14px;
	background: rgb(25 194 130 / .1); border: 1px solid rgb(25 194 130 / .25);
}
.salubre-xray__detail .sx-alt b {
	color: var(--wp--preset--color--green-bright, #19C282);
	display: block; margin-bottom: .25rem;
}
.salubre-xray__detail .sx-alt span { font-size: .87rem; color: #C4DACE; line-height: 1.55; }
.salubre-xray__detail .sx-hint { margin-top: 1rem; font-size: .78rem; color: #7E958A; }

/* Apparition douce au changement d'objet */
.salubre-xray__detail.is-switching > * { animation: sx-in .28s ease both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .salubre-xray__detail.is-switching > * { animation: none; } }

@media (max-width: 880px) {
	.salubre-xray { grid-template-columns: 1fr; }
	.salubre-xray__detail { min-height: 0; }
}