/**
 * VS Animated Titles — styles de base.
 * Les couleurs sont pilotées par des variables CSS surchargées depuis Elementor.
 */

/* ============================================================
 * TITRE HIGHLIGHT AU SCROLL
 * ============================================================ */
.vsat-scroll-highlight {
	--vsat-bright: #ffffff;
	--vsat-accent: #d41543;
	margin: 0;
	/* L'effet joue sur l'OPACITÉ (comme le site) : une seule couleur de texte. */
	color: var( --vsat-bright );
}

.vsat-scroll-highlight .vsat-word {
	display: inline-block;
	white-space: nowrap;
}

/* Les caractères héritent de la couleur ; le JS anime opacity + translateX. */
.vsat-scroll-highlight .vsat-char,
.vsat-scroll-highlight .vsat-word.vsat-unit {
	display: inline-block;
	color: inherit;
	will-change: opacity, transform;
}

/* Fragment accentué : couleur d'accent constante (l'opacité fait le reveal). */
.vsat-scroll-highlight .is-accent {
	color: var( --vsat-accent );
}

/* Mode « entrée » avec montée. */
.vsat-scroll-highlight .vsat-char.vsat-has-rise,
.vsat-scroll-highlight .vsat-word.vsat-has-rise {
	opacity: 0.001;
}

.vsat-scroll-highlight .is-lit {
	opacity: 1;
}

/* ============================================================
 * MARQUEE DÉFILANT
 * ============================================================ */
.vsat-marquee {
	--vsat-bright: #ffffff;
	--vsat-accent: #d41543;
	--vsat-dim: rgba( 255, 255, 255, 0.28 );
	--vsat-mq-size: 120px;
	--vsat-mq-gap: 48px;
	--vsat-shift: 0px;
	overflow: hidden;
	width: 100%;
}

.vsat-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	column-gap: var( --vsat-mq-gap );
	will-change: transform;
}

.vsat-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: var( --vsat-mq-gap );
	flex: 0 0 auto;
}

.vsat-marquee__item,
.vsat-marquee__sep {
	display: inline-block;
	font-size: var( --vsat-mq-size );
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
}

.vsat-marquee__item.color-bright {
	color: var( --vsat-bright );
}
.vsat-marquee__item.color-accent {
	color: var( --vsat-accent );
}
.vsat-marquee__item.color-dim {
	color: var( --vsat-dim );
}

.vsat-marquee__sep {
	color: var( --vsat-dim );
}

/* Style : contour (outline). */
.vsat-marquee__item.is-outline {
	color: transparent;
	-webkit-text-stroke: 1px currentColor;
}
.vsat-marquee__item.is-outline.color-bright {
	-webkit-text-stroke-color: var( --vsat-bright );
}
.vsat-marquee__item.is-outline.color-accent {
	-webkit-text-stroke-color: var( --vsat-accent );
}
.vsat-marquee__item.is-outline.color-dim {
	-webkit-text-stroke-color: var( --vsat-dim );
}

/* Style : serif italique. */
.vsat-marquee__item.is-serif-italic {
	font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
}

/* Animation de boucle. */
@keyframes vsat-mq-move {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( calc( -1 * var( --vsat-shift ) ) );
	}
}

.vsat-marquee.vsat-pause-hover:hover .vsat-marquee__track {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.vsat-marquee__track {
		animation: none !important;
		transform: none !important;
	}
}

/* ============================================================
 * MÉGA-TITRE HÉRO (ZOOM REVEAL)
 * ============================================================ */
.vsat-hero-title {
	margin: 0;
	display: block;
}

.vsat-hero-title .vsat-line {
	display: block;
}

/* Le masque n'est nécessaire que pour la révélation « mask-up ». */
.vsat-hero-title.vsat-reveal-mask-up .vsat-line {
	overflow: hidden;
}

.vsat-hero-title .vsat-line__inner {
	display: inline-block;
	will-change: transform, opacity;
	transition-property: transform, opacity;
	transition-timing-function: cubic-bezier( 0.16, 1, 0.3, 1 );
	transition-duration: 0.9s;
}

/* États initiaux (avant révélation) selon le style. */
.vsat-hero-title.vsat-reveal-mask-up .vsat-line__inner {
	transform: translateY( 110% );
}
.vsat-hero-title.vsat-reveal-fade-up .vsat-line__inner {
	transform: translateY( 40px );
	opacity: 0.001;
}
.vsat-hero-title.vsat-reveal-zoom .vsat-line__inner {
	transform: scale( 1.35 );
	opacity: 0.001;
	transform-origin: left center;
}

/* État révélé : retour à l'identité. */
.vsat-hero-title.is-revealed .vsat-line__inner {
	transform: translateY( 0 ) scale( 1 );
	opacity: 1;
}

/* Repli sans JS : titre visible. */
.vsat-hero-title:not( [data-vsat-init] ) .vsat-line__inner {
	transform: none;
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.vsat-hero-title .vsat-line__inner {
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ============================================================
 * FILIGRANE PARALLAX
 * ============================================================ */
.vsat-parallax-text {
	display: block;
	white-space: nowrap;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	pointer-events: none;
	user-select: none;
	will-change: transform;
}

/* ============================================================
 * CARROUSEL (articles / partenaires / projets)
 * ============================================================ */
.vsat-carousel {
	--vsat-accent: #d41543;
	position: relative;
	width: 100%;
}

.vsat-carousel__viewport {
	overflow: hidden;
	width: 100%;
	cursor: grab;
}
.vsat-carousel__viewport:active {
	cursor: grabbing;
}

.vsat-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	will-change: transform;
}

.vsat-carousel__slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 0;
}

/* Flèches */
.vsat-carousel__arrow {
	position: absolute;
	top: 40%;
	width: 46px;
	height: 46px;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.3 );
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s, border-color 0.25s;
}
.vsat-carousel__arrow:hover {
	background: var( --vsat-accent );
	border-color: var( --vsat-accent );
}
.vsat-carousel__arrow.is-prev { left: -10px; }
.vsat-carousel__arrow.is-next { right: -10px; }
.vsat-carousel__arrow span {
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.vsat-carousel__arrow.is-prev span { transform: rotate( -135deg ); margin-left: 4px; }
.vsat-carousel__arrow.is-next span { transform: rotate( 45deg ); margin-right: 4px; }

/* Points */
.vsat-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}
.vsat-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.25 );
	cursor: pointer;
	transition: background 0.25s, width 0.25s;
}
.vsat-carousel__dot.is-active {
	background: var( --vsat-accent );
	width: 22px;
	border-radius: 4px;
}

/* ---- Carte ARTICLE (blog) ---- */
.vsat-post-card { display: block; text-decoration: none; }
.vsat-post-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1000 / 641;
	border-radius: 10px;
	overflow: hidden;
	background: #1a1a1c;
}
.vsat-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.vsat-post-card:hover .vsat-post-card__media img { transform: scale( 1.06 ); }
.vsat-post-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}
.vsat-post-card__cat {
	color: #c2c2c2;
	font-size: 16px;
	line-height: 1;
}
.vsat-post-card__date {
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 14px;
	line-height: 1;
}
.vsat-post-card__title {
	margin: 10px 0 0;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	transition: color 0.25s;
}
.vsat-post-card:hover .vsat-post-card__title { color: var( --vsat-accent ); }

/* ---- Carte PARTENAIRE (logo) ---- */
.vsat-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 90px;
}
.vsat-logo-card img {
	max-width: 100%;
	max-height: 70px;
	width: auto;
	object-fit: contain;
	opacity: 0.65;
	filter: grayscale( 100% );
	transition: opacity 0.3s, filter 0.3s;
}
.vsat-logo-card:hover img {
	opacity: 1;
	filter: grayscale( 0 );
}

/* ---- Carte PROJET (média) ---- */
.vsat-media-card { display: block; }
.vsat-media-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background: #1a1a1c;
}
.vsat-media-card__media img,
.vsat-media-card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.vsat-media-card:hover .vsat-media-card__media img { transform: scale( 1.06 ); }
.vsat-media-card__title {
	margin: 16px 0 2px;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.vsat-media-card__sub {
	color: #8a8a90;
	font-size: 14px;
}

@media ( max-width: 767px ) {
	.vsat-carousel__arrow { display: none; }
}

/* Logo en couleur (grayscale désactivé). */
.vsat-logo-card.is-color img { filter: none; opacity: 1; }

/* Message éditeur si carrousel vide. */
.vsat-empty {
	padding: 40px;
	text-align: center;
	color: #8a8a90;
	border: 1px dashed rgba( 255, 255, 255, 0.2 );
	border-radius: 12px;
}

/* ============================================================
 * GALERIE INCLINÉE AU SCROLL (sticky horizontal)
 * ============================================================ */
.vsat-tilt-gallery {
	--vsat-tg-w: 440px;
	--vsat-tg-h: 600px;
	--vsat-tg-gap: 28px;
	--vsat-tg-radius: 14px;
	position: relative;
	width: 100%;
	background-color: #000;
}

.vsat-tilt-gallery .vsat-tg__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.vsat-tilt-gallery .vsat-tg__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: var( --vsat-tg-gap );
	padding: 0 6vw;
	will-change: transform;
}

.vsat-tilt-gallery .vsat-tg__card {
	flex: 0 0 var( --vsat-tg-w );
	width: var( --vsat-tg-w );
}

.vsat-tilt-gallery .vsat-tg__media {
	display: block;
	width: 100%;
	height: var( --vsat-tg-h );
	border-radius: var( --vsat-tg-radius );
	overflow: hidden;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.5 );
}
.vsat-tilt-gallery .vsat-tg__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Repli : défilement horizontal manuel (mouvement réduit). */
.vsat-tilt-gallery.is-static {
	height: auto !important;
}
.vsat-tilt-gallery.is-static .vsat-tg__sticky {
	position: static;
	height: auto;
	overflow-x: auto;
}
.vsat-tilt-gallery.is-static .vsat-tg__track {
	transform: none !important;
	padding: 40px 6vw;
}

@media ( max-width: 767px ) {
	.vsat-tilt-gallery { --vsat-tg-w: 74vw; --vsat-tg-h: 60vh; }
}

/* ============================================================
 * VIDÉO QUI S'AGRANDIT AU SCROLL (sticky expand)
 * ============================================================ */
.vsat-video-expand {
	position: relative;
	width: 100%;
}

.vsat-video-expand .vsat-ve__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Sortie pleine largeur (full-bleed) quelle que soit la largeur du conteneur. */
	width: 100vw;
	margin-left: calc( -50vw + 50% );
}

.vsat-video-expand .vsat-ve__frame {
	position: relative;
	width: 55%;
	height: 60vh;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.5 );
	will-change: width, height, border-radius;
}

.vsat-video-expand .vsat-ve__frame > img,
.vsat-video-expand .vsat-ve__frame > video,
.vsat-video-expand .vsat-ve__frame > iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	display: block;
}

/* Repli sans mouvement : média affiché en grand. */
.vsat-video-expand.is-static { height: auto !important; }
.vsat-video-expand.is-static .vsat-ve__sticky { position: static; height: auto; }

/* ---- Carte ARTICLE : style superposé (verre dépoli) ---- */
.vsat-post-card__panel { display: block; }

/* Empilé : comportement d'origine (image ratio + texte dessous). */
.vsat-post-card.is-stacked .vsat-post-card__media { aspect-ratio: 1000 / 641; }

/* Superposé : image plein cadre + panneau glass en bas. */
.vsat-post-card.is-overlay {
	position: relative;
	height: 520px;
	border-radius: 14px;
	overflow: hidden;
	display: block;
}
.vsat-post-card.is-overlay .vsat-post-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}
.vsat-post-card.is-overlay .vsat-post-card__panel {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	padding: 18px 20px;
	border-radius: 14px;
	background: rgba( 22, 22, 24, 0.42 );
	-webkit-backdrop-filter: blur( 18px );
	backdrop-filter: blur( 18px );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.3 );
}
.vsat-post-card.is-overlay .vsat-post-card__meta { margin-top: 0; }
.vsat-post-card.is-overlay .vsat-post-card__title { margin: 8px 0 0; }