.pischema {
	--pischema-highlight: #e07a3f;
	max-width: 100%;
}

.pischema-header {
	text-align: center;
	margin-bottom: 28px;
}

.pischema-title {
	font-size: clamp(22px, 3vw, 32px);
	margin: 0 0 8px;
	color: #2b2b2b;
}

.pischema-subtitle {
	margin: 0;
	color: #666;
	font-size: 16px;
}

.pischema-wrap {
	max-width: 900px;
	margin: 0 auto;
}

.pischema-svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Silhouette générale */
.pischema-ground {
	stroke: #333;
	stroke-width: 2;
}

.pischema-outline {
	fill: none;
	stroke: #2b2b2b;
	stroke-width: 2;
}

.pischema-outline--top {
	fill: none;
	pointer-events: none;
}

/* Zones */
.pischema-zone {
	cursor: pointer;
	outline: none;
}

.pischema-zone .pischema-shape path,
.pischema-zone .pischema-shape rect {
	stroke: #2b2b2b;
	stroke-width: 1.5;
	transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	transform-origin: center;
}

.pischema-zone.is-ite .pischema-shape path {
	stroke: #8b5a2b;
	stroke-width: 3;
	stroke-dasharray: 10 8;
	fill: none;
}

.pischema-zone:hover .pischema-shape path,
.pischema-zone:hover .pischema-shape rect,
.pischema-zone.is-active .pischema-shape path,
.pischema-zone.is-active .pischema-shape rect {
	filter: brightness(1.12) saturate(1.15);
}

.pischema-zone.is-ite:hover .pischema-shape path,
.pischema-zone.is-ite.is-active .pischema-shape path {
	stroke: var(--pischema-highlight);
}

.pischema-zone:focus-visible .pischema-shape path,
.pischema-zone:focus-visible .pischema-shape rect {
	filter: brightness(1.12) saturate(1.15);
}

/* Étiquettes / connecteurs */
.pischema-label {
	pointer-events: none;
}

.pischema-label__line {
	fill: none;
	stroke: #2b2b2b;
	stroke-width: 1.5;
}

.pischema-label--ite .pischema-label__line {
	stroke: #8b5a2b;
}

.pischema-label__dot {
	fill: #2b2b2b;
}

.pischema-label--ite .pischema-label__dot {
	fill: #8b5a2b;
}

.pischema-label__t {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-family: inherit;
}

.pischema-label--ite .pischema-label__t {
	fill: #8b5a2b;
	font-style: italic;
}

/* Zone active (clic / survol / focus) : l'étiquette correspondante change de couleur.
   !important pour garantir la priorité sur les styles générés par Elementor
   (couleur de texte, typographie) quel que soit l'ordre d'injection du CSS. */
.pischema-label.is-active .pischema-label__t {
	fill: var(--pischema-highlight) !important;
}

.pischema-label.is-active .pischema-label__line {
	stroke: var(--pischema-highlight) !important;
}

.pischema-label.is-active .pischema-label__dot {
	fill: var(--pischema-highlight) !important;
}

/* Panneau de description */
.pischema-panel {
	margin-top: 28px;
	border-radius: 10px;
	background: #f7f3ee;
	padding: 4px;
}

.pischema-panel__inner {
	padding: 22px 26px;
	transition: opacity 0.15s ease;
}

.pischema-panel__title {
	margin: 0 0 8px;
	font-size: 19px;
	color: #8b5a2b;
}

.pischema-panel__text {
	margin: 0;
	color: #444;
	line-height: 1.55;
}

.pischema-panel__link {
	display: inline-block;
	margin-top: 14px;
	font-weight: 600;
	color: #8b5a2b;
	text-decoration: underline;
}

/* Texte par défaut du panneau : "survol" sur souris, "touchez" sur écran tactile.
   On teste la capacité réelle de l'appareil (hover/pointer), pas la largeur de
   l'écran, pour couvrir aussi les tablettes tactiles en mode paysage. */
.pischema-panel__title-touch {
	display: none;
}

@media (hover: none), (pointer: coarse) {
	.pischema-panel__title-pointer {
		display: none;
	}

	.pischema-panel__title-touch {
		display: inline;
	}
}

@media (max-width: 640px) {
	.pischema-label__t {
		font-size: 14px;
	}

	/* Repositionnement des étiquettes en mobile.
	   Important : Safari sur iOS (donc quasi tous les mobiles) ne supporte PAS
	   les propriétés CSS "x" / "y" sur <text> (contrairement à Chrome/Firefox
	   desktop). On utilise donc "transform: translate()", qui fonctionne sur
	   tous les navigateurs, y compris Safari mobile. Les valeurs sont des
	   décalages (delta) par rapport à la position d'origine du texte dans le SVG. */

	/* TOITURE : position d'origine x=145 y=150 → cible x=130 y=150 (décalage -15px, 0px) */
	.pischema-label[data-label-for="toiture"] .pischema-label__t {
		transform: translate(-15px, 0px);
		font-size: 20px;
	}
	.pischema-label text.pischema-label__t:nth-of-type(2) {
    transform: translateY(12px);
}
	/* SOL : position d'origine x=145 y=525 → décalage -15px en x (même logique que TOITURE),
	   agrandie de la même façon. On garde y=525 pour ne pas superposer le texte à TOITURE. */
	.pischema-label[data-label-for="sol"] .pischema-label__t {
		transform: translate(-15px, 0px);
		font-size: 20px;
	}
}