/* ============================================================
   Scroll Sticky Média — MVP
   ============================================================ */

.ssm-wrapper {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* Filet de sécurité : certains thèmes/plugins mettent overflow:hidden
   sur les conteneurs Elementor, ce qui casse silencieusement le sticky. */
.elementor-widget-scroll_sticky_media,
.elementor-widget-scroll_sticky_media .elementor-widget-container {
	overflow: visible;
}

/* Position du média : gauche ou droite
   (la colonne média est la 2e dans le HTML : row-reverse la place à
   gauche, row normal la place à droite) */
.ssm-wrapper.ssm-media-left {
	flex-direction: row-reverse;
}
.ssm-wrapper.ssm-media-right {
	flex-direction: row;
}

.ssm-content-col,
.ssm-media-col {
	width: 50%;
}

/* --- Colonne contenu --- */
.ssm-content-col {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.ssm-content-block {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ssm-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
}

/* Icône de bibliothèque (police d'icônes) : la couleur vient de "color"
   posé en inline-style par le PHP, elle s'applique nativement. */
.ssm-item-icon svg,
.ssm-item-icon i {
	width: 100%;
	height: 100%;
	font-size: 40px;
	line-height: 1;
}

/* Icône SVG uploadée : rendue en masque CSS. La couleur vient du
   background-color posé en inline-style, insensible aux couleurs
   codées en dur dans le fichier SVG source. */
.ssm-item-icon-mask {
	background-color: #1a1a1a;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ssm-item-text {
	line-height: 1.6;
}
.ssm-item-text p:last-child {
	margin-bottom: 0;
}

/* Les boutons utilisent les classes "btn", "btn-primary", "btn-secondary"
   et "btn-tertiary" du thème : aucun style n'est défini ici pour éviter
   tout conflit avec le design system existant. */

/* --- Colonne média (desktop uniquement) --- */
.ssm-desktop-mode .ssm-media-col {
	position: sticky;
	top: 150px;
	height: 80vh;
}

.ssm-media-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	opacity: 0;
	overflow: hidden;
	border-radius: 10px;
	box-sizing: border-box;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.ssm-media-item.is-visible {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.ssm-media-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Vidéo --- */
.ssm-media-video {
	background-color: #000;
}

.ssm-video-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
	outline: 0;
	box-sizing: border-box;
	pointer-events: auto;
	z-index: 1;
}

.ssm-video-overlay-noimage {
	background-color: #000;
}

.ssm-video-tint {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ssm-video-play {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ssm-video-play::before {
	content: '';
	width: 32%;
	height: 36%;
	margin-left: 8%;
	background-color: #1a1a1a;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ssm-video-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- SVG --- */
.ssm-media-svg svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Mode mobile : média masqué, contenu en pile avec fade-in --- */
.ssm-mobile-mode {
	flex-direction: column;
}

.ssm-mobile-mode .ssm-media-col {
	display: none;
}

.ssm-mobile-mode .ssm-content-col,
.ssm-mobile-mode .ssm-media-col {
	width: 100%;
}

.ssm-mobile-mode .ssm-content-block {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.ssm-mobile-mode .ssm-content-block.ssm-fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}