/* Fouzia Khaia – modèles Turtletoy */

.fk-tt {
	position: relative;
	width: 100%;
	min-height: 120px;
	overflow: hidden;
	background: var(--fk-tt-bg, #EFEBE3);
}

.fk-tt--block {
	height: 60vh;
}

.fk-tt__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.fk-tt__data {
	display: none;
}

/* Animation en couches (WebGL) : se superpose au dessin fixe, masqué pendant l'animation */
.fk-tt__gl {
	pointer-events: none;
}

/* Mode « fond du conteneur » : le dessin occupe tout le conteneur parent, comme une image de fond */
.fk-tt--background {
	position: absolute;
	inset: 0;
	height: 100%;
	min-height: 0;
}

/* Le conteneur crée son propre plan d'empilement : le dessin passe devant son fond mais derrière ses textes,
   quel que soit l'ordre des widgets (y compris dans l'éditeur Elementor). */
.e-con:has(.elementor-widget-fk-turtletoy .fk-tt--background) {
	isolation: isolate;
}

.elementor-widget-fk-turtletoy:has(.fk-tt--background) {
	position: absolute !important;
	inset: 0;
	z-index: -1;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-widget-fk-turtletoy:has(.fk-tt--background) > .elementor-widget-container {
	height: 100%;
}

/* Les autres éléments du conteneur passent au-dessus du dessin */
.e-con:has(> .elementor-widget-fk-turtletoy .fk-tt--background) > .elementor-element:not(.elementor-widget-fk-turtletoy),
.e-con-inner:has(> .elementor-widget-fk-turtletoy .fk-tt--background) > .elementor-element:not(.elementor-widget-fk-turtletoy) {
	position: relative;
	z-index: 2;
}

.fk-tt-placeholder {
	padding: 24px;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	font-size: 13px;
	text-align: center;
}