/* ==========================================================================
   Sorali — accueil : hero vidéo, bandeau défilant, carrousel vidéo, avis.
   ========================================================================== */

/* ---------- Hero vidéo ---------- */
.sorali-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--sorali-black);
	aspect-ratio: 16 / 9;
	max-height: var(--sorali-hero-max-h, none);
	isolation: isolate;
}
.sorali-hero--screen { aspect-ratio: auto; height: min(100svh, var(--sorali-hero-max-h, 100svh)); min-height: 420px; }
.sorali-hero__media, .sorali-hero__overlay { position: absolute; inset: 0; }
.sorali-hero__video, .sorali-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sorali-hero__video--mobile { display: none; }
.sorali-hero__overlay { z-index: 1; pointer-events: none; background-color: rgba(0, 0, 0, .15); }
.sorali-hero__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.5rem, 4vw, 4rem);
	text-align: center;
	color: var(--sorali-white);
}
.sorali-hero__title {
	margin: 0;
	color: var(--sorali-white);
	font-size: clamp(1.8rem, 1.2rem + 3vw, 3.6rem);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.15;
}
.sorali-hero__text { margin: 0; max-width: 36rem; font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); color: rgba(255, 255, 255, .92); }
.sorali-hero__toggle {
	position: absolute;
	z-index: 3;
	right: 16px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: rgba(10, 10, 10, .35);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
}
.sorali-hero__toggle .sorali-icon-play { display: none; }
.sorali-hero__toggle.is-paused .sorali-icon-play { display: block; }
.sorali-hero__toggle.is-paused .sorali-icon-pause { display: none; }

/* Mobile : vidéo 9:16 indépendante (le point de rupture est ajusté par le script). */
.sorali-hero.is-mobile { aspect-ratio: 9 / 16; }
.sorali-hero.is-mobile.sorali-hero--screen { aspect-ratio: auto; }
.sorali-hero.is-mobile .sorali-hero__video--desktop { display: none; }
.sorali-hero.is-mobile .sorali-hero__video--mobile { display: block; }
@media (max-width: 767px) {
	.sorali-hero:not([data-sorali-ready]) { aspect-ratio: 9 / 16; }
	.sorali-hero:not([data-sorali-ready]) .sorali-hero__video--desktop { display: none; }
	.sorali-hero:not([data-sorali-ready]) .sorali-hero__video--mobile { display: block; }
	.sorali-hero--screen:not([data-sorali-ready]) { aspect-ratio: auto; }
}

/* ---------- Bandeau défilant (droite → gauche, boucle continue) ---------- */
.sorali-marquee {
	--sorali-marquee-duration: 28s;
	--sorali-marquee-gap: 48px;
	position: relative;
	overflow: hidden;
	background: var(--sorali-pink);
	color: #ffffff;
	padding: 8px 0;
	white-space: nowrap;
}
.sorali-marquee__track {
	display: flex;
	width: max-content;
	animation: sorali-marquee var(--sorali-marquee-duration) linear infinite;
	will-change: transform;
}
.sorali-marquee__group { display: flex; flex-shrink: 0; }
.sorali-marquee__item {
	flex-shrink: 0;
	padding-right: var(--sorali-marquee-gap);
	font-family: var(--sorali-font);
	font-size: clamp(.68rem, .64rem + .2vw, .8rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
}
@keyframes sorali-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.sorali-marquee__track { animation: none; width: auto; justify-content: center; }
	.sorali-marquee__group + .sorali-marquee__group { display: none; }
	.sorali-marquee__group .sorali-marquee__item:not(:first-child) { display: none; }
	.sorali-marquee { white-space: normal; text-align: center; padding-left: 16px; padding-right: 16px; }
	.sorali-marquee__item { padding-right: 0; }
}

/* ---------- Carrousel « Sorali en vidéo » ---------- */
.sorali-vcar { --sorali-vcar-w: 280px; --sorali-vcar-gap: 16px; position: relative; }
.sorali-vcar__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sorali-vcar__heading .sorali-title { margin-bottom: .5rem; }
.sorali-vcar__subtitle { margin: 0; color: var(--sorali-grey); font-size: .95rem; max-width: 40rem; }
.sorali-vcar__nav { display: flex; gap: .5rem; flex-shrink: 0; }
.sorali-vcar__arrow {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--sorali-black);
	border-radius: 50%;
	background: var(--sorali-white);
	color: var(--sorali-black);
	cursor: pointer;
	transition: background-color .2s var(--sorali-ease), opacity .2s;
}
.sorali-vcar__arrow:hover:not(:disabled) { background: var(--sorali-pink); border-color: var(--sorali-pink); }
.sorali-vcar__arrow:disabled { opacity: .3; cursor: default; }
.sorali-vcar__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sorali-vcar-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	padding-bottom: 4px;
	cursor: grab;
}
.sorali-vcar__track::-webkit-scrollbar { display: none; }
.sorali-vcar__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.sorali-vcar__item { flex: 0 0 var(--sorali-vcar-w); scroll-snap-align: start; }
.sorali-vcar__frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #f3f3f3; }
.sorali-vcar__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sorali-vcar__link {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: .7rem 1rem;
	background: rgba(255, 255, 255, .92);
	color: var(--sorali-black);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.sorali-vcar__link:hover { background: var(--sorali-pink); }
@media (max-width: 767px) {
	.sorali-vcar__header { align-items: flex-start; flex-direction: column; }
	.sorali-vcar__nav { align-self: flex-end; }
}

/* ---------- Avis clients (accueil) ---------- */
.sorali-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 8px;
}
@media (min-width: 1025px) {
	.sorali-reviews__track { grid-auto-columns: calc((100% - 48px) / 4); }
}
.sorali-review-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem;
	background: #fafafa;
	border: 1px solid var(--sorali-line);
}
.sorali-review-card .sorali-review-image { margin: -1.5rem -1.5rem .5rem; }
.sorali-review-card .sorali-review-image img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sorali-review-card__text { margin: 0; padding: 0; border: 0; font-size: .92rem; line-height: 1.65; color: var(--sorali-black); font-style: normal; }
.sorali-review-card__text p { margin: 0; }
.sorali-review-card__author { margin: auto 0 0; font-size: .85rem; }
.sorali-review-card__product { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.sorali-review-card__product a { color: var(--sorali-grey); text-decoration: none; }
.sorali-review-card__product a:hover { color: var(--sorali-black); text-decoration: underline; }