/* Radiographie interactive : Salubre (sur fond olive douce) */
.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: var(--wp--preset--color--ink, #241F1A);
	border: 1px solid rgb(255 255 255 / .14);
	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(255 255 255 / .06);
	stroke: rgb(255 255 255 / .4);
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
}
.sx-item.is-active .sx-hit {
	stroke: rgb(255 255 255 / .55);
	stroke-width: 1.5;
	stroke-dasharray: none;
}
.sx-item .sx-draw {
	stroke: #E5D3A4; stroke-width: 2.75; 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: .6; }
.sx-item:hover .sx-draw,
.sx-item:focus-visible .sx-draw,
.sx-item.is-active .sx-draw { stroke: #FFFFFF; }
.sx-item .sx-pulse { fill: var(--wp--preset--color--signal, #C93A22); pointer-events: none; }
.sx-item.is-active .sx-pulse { fill: #FFFFFF; }
.sx-item .sx-halo {
	fill: var(--wp--preset--color--signal, #C93A22); opacity: .3;
	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: .4; }
	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: #F5EDD6; font-size: 11px; pointer-events: none; transition: fill .2s; }
.sx-item:hover text, .sx-item.is-active text { fill: #FFFFFF; }

.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(185 106 80 / .34); color: #F6D2BC;
}
.salubre-xray__detail h3 { color: #fff; font-size: 1.35rem; margin: .9rem 0 .2rem; }
.salubre-xray__detail .sx-risk { color: #F6D2BC; font-weight: 700; font-size: .88rem; margin: 0; }
.salubre-xray__detail .sx-why { font-size: .9rem; color: #F5EDDA; margin: .8rem 0 0; line-height: 1.6; }
.salubre-xray__detail .sx-alt {
	margin-top: 1.1rem; padding: 1rem; border-radius: 14px;
	background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25);
}
.salubre-xray__detail .sx-alt b {
	color: #FFFFFF;
	display: block; margin-bottom: .25rem;
}
.salubre-xray__detail .sx-alt span { font-size: .87rem; color: #F5EDDA; line-height: 1.55; }
.salubre-xray__detail .sx-hint { margin-top: 1rem; font-size: .78rem; color: #E8D6A9; }

/* 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; }
}