/**
 * Homepage Styles
 * Hero, sections spécifiques page d'accueil
 *
 * @package TacticHall
 */

/* ==========================================================================
   Hero Section - Homepage
   ========================================================================== */

.hero-section {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: var(--border-primary);
	padding: var(--spacing-4xl) 0;
}

.hero-container {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--container-padding-x);
	z-index: 2;
}

.hero-content {
	max-width: 700px;
	color: var(--color-white);
	position: relative;
	z-index: 3;
}

.hero-title {
	font-family: var(--wp--preset--font-family--stencil);
	font-size: 3.5rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-md) 0;
	line-height: 1.1;
}

.hero-subtitle {
	font-size: 1.25rem;
	margin: 0 0 var(--spacing-xl) 0;
	opacity: 0.95;
	line-height: 1.6;
}

.hero-buttons {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.hero-image {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero-image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			rgba(0, 0, 0, 0.9) 10%,
			rgba(0, 0, 0, 0.5) 90%);
	z-index: 2;
}

/* Responsive Hero */
@media (max-width: 1024px) {
	.hero-section {
		padding: var(--spacing-3xl) 0;  /* 5rem */
		min-height: 500px;
	}

	.hero-title {
		font-size: 2.5rem;
	}

	.hero-subtitle {
		font-size: 1.125rem;
	}
}

@media (max-width: 768px) {
	.hero-section {
		padding: var(--spacing-2xl) 0;  /* 4rem */
		min-height: 450px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 1rem;
		margin: 0 0 var(--spacing-lg) 0;
	}

	.hero-buttons {
		flex-direction: column;
	}
}

/* ==========================================================================
   CTA Section - Homepage
   Note: Styles CTA déplacés vers global.css pour réutilisation
   ========================================================================== */

/* ==========================================================================
   Carousel Produits - Homepage
   ========================================================================== */

/* Section header with navigation buttons at top-right */
.section-header-with-nav {
	position: relative;
	text-align: center;
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-sm);
}

.section-header-content {
	max-width: 800px;
	margin: 0 auto;
}

.carousel-nav {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
}

/* Wrapper carousel */
.products-carousel-wrapper {
	position: relative;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* Carousel container */
.products-carousel {
	display: flex;
	align-items: stretch;
	gap: var(--grid-gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE et Edge */
	padding: var(--spacing-sm) 0;
}

/* Masquer scrollbar */
.products-carousel::-webkit-scrollbar {
	display: none;
}

/* Cards produits dans le carousel - 4 produits visibles */
.products-carousel .product-card {
	flex: 0 0 calc(25% - 1.5rem);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	height: auto;
	align-self: stretch;
}

/* Message si aucun produit */
.no-products-message {
	text-align: center;
	padding: var(--spacing-2xl) var(--spacing-lg);
	color: var(--color-steel);
	font-size: 1rem;
	width: 100%;
}

/* Boutons navigation carousel - utilise .btn-icon de global.css */
.carousel-btn {
	position: relative;
	border-radius: 0;
	flex-shrink: 0;
}

/* Responsive Carousel */
@media (max-width: 1024px) {

	/* Tablet: 2 produits visibles */
	.products-carousel .product-card {
		flex: 0 0 calc(50% - 1rem);
	}
}

@media (max-width: 639px) {

	/* Mobile: 1 produit visible */
	.products-carousel .product-card {
		flex: 0 0 calc(100% - 2rem);
	}

	.section-header-with-nav {
		padding-bottom: var(--spacing-2xl);
	}

	.carousel-nav {
		position: static;
		width: 100%;
		justify-content: center;
		margin-top: var(--spacing-md);
	}
}

/* ==========================================================================
   Reassurance Section
   Note: Utilise .section-bordered-smoke, .grid-auto-fit et .icon-box de global.css
   ========================================================================== */

.reassurance-grid {
	max-width: 1200px;
	margin: 0 auto;
}

/* Mobile: augmenter le gap quand les cards sont empilées verticalement */
@media (max-width: 639px) {
	.reassurance-grid {
		gap: var(--spacing-lg);
	}
}

/* ==========================================================================
   Purchase Process Section - Étapes (Comment ça marche)
   ========================================================================== */

.purchase-process-section {
	background: var(--color-black);
	position: relative;
	overflow: hidden;
	padding: var(--spacing-3xl) 0;
}

/* Bouton inversé sur fond sombre */
.purchase-process-section .btn-black {
	background: var(--color-white);
	color: var(--color-black);
	border: var(--border-primary);
	border-color: var(--color-white);
}

.purchase-process-section .btn-black:hover {
	background: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}

/* Image de fond avec overlay */
.purchase-process-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../../images/TacTicHall.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.38;
	z-index: 0;
}

/* Overlay sombre supplémentaire */
.purchase-process-section::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 100%);
	z-index: 1;
}

/* S'assurer que le contenu est au-dessus */
.purchase-process-section .container {
	position: relative;
	z-index: 2;
}

/* Texte blanc pour la section avec fond sombre */
.purchase-process-section .section-title {
	color: var(--color-white);
}

.purchase-process-section .section-subtitle {
	color: var(--color-gray-lighter);
}

.process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
	position: relative;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.process-step {
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Numéro de l'étape - Inversé sur fond sombre */
.process-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--color-white);
	color: var(--color-black);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--stencil);
	font-size: 2rem;
	font-weight: 400;
	margin: 0 0 var(--spacing-sm) 0;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Ligne de connexion entre les étapes - Desktop (claire sur fond sombre) */
.process-step:not(:last-child) .process-step__number::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 100%;
	width: calc((100vw - 1200px) / 2 + 2.5rem);
	max-width: 150px;
	height: 2px;
	background: rgba(255, 255, 255, 0.2);
	z-index: 1;
	transform: translateY(-50%);
}

/* Alternative : trait au centre de la grille */
@media (min-width: 769px) {
	.process-step:not(:last-child)::before {
		content: '';
		position: absolute;
		top: 36px;
		left: calc(50% + 36px);
		width: calc(100% - 36px + 2.5rem / 2);
		height: 2px;
		background: rgba(255, 255, 255, 0.2);
		z-index: 1;
	}

	.process-step:not(:last-child) .process-step__number::after {
		display: none;
	}
}

.process-step__title {
	font-family: var(--wp--preset--font-family--stencil);
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-xs) 0;
	color: var(--color-white);
	line-height: 1.3;
}

.process-step__description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-gray-lighter);
	margin: 0;
	max-width: 250px;
}

/* Responsive Purchase Process */

/* Tablet (2 colonnes) */
@media (max-width: 1024px) and (min-width: 769px) {
	.process-steps {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-2xl) var(--spacing-lg);
	}

	/* Traits uniquement entre colonnes (1->2, 3->4) */
	.process-step:nth-child(odd):not(:nth-last-child(-n+2))::before {
		content: '';
		position: absolute;
		top: 36px;
		left: calc(50% + 36px);
		width: calc(100% - 36px + var(--spacing-lg) / 2);
		height: 2px;
		background: rgba(255, 255, 255, 0.2);
		z-index: 1;
	}

	/* Pas de trait sur les éléments pairs ou sur la dernière ligne */
	.process-step:nth-child(even)::before,
	.process-step:nth-last-child(-n+2)::before {
		display: none;
	}
}

/* Mobile (1 colonne) */
@media (max-width: 768px) {
	.process-steps {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
		max-width: 400px;
	}

	.process-step__number {
		width: 64px;
		height: 64px;
		font-size: 1.75rem;
		margin-bottom: var(--spacing-sm);
	}

	/* Traits verticaux entre les étapes */
	.process-step:not(:last-child)::before {
		content: '';
		position: absolute;
		top: calc(64px + var(--spacing-sm));
		left: 50%;
		width: 2px;
		height: calc(100% - 64px - var(--spacing-sm) + var(--spacing-xl));
		background: rgba(255, 255, 255, 0.2);
		z-index: 1;
		transform: translateX(-50%);
	}

	.process-step__title {
		font-size: 0.9375rem;
	}

	.process-step__description {
		font-size: 0.875rem;
	}

	.purchase-process-section {
		padding: var(--spacing-2xl) 0;
	}
}

/* ==========================================================================
   Page d'accueil vitrine (front-page-vitrine.php)
   Chaque section a sa propre composition pour sortir du « texte + image »
   répété. Palette : tokens inversés de .site-vitrine (base.css), aucune
   couleur codée en dur hors re-inversions locales documentées.
   ========================================================================== */

/* Ancres du menu : le header est sticky, on évite qu'il masque les titres */
.site-vitrine [id] {
	scroll-margin-top: 6rem;
}

/* Menu à ancres : libellés sur une ligne (8 entrées + bouton boutique) */
.site-vitrine .main-navigation a {
	white-space: nowrap;
}

/* Titre de section « affiche » : plus grand que .section-title */
.vitrine-display {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.05;
	margin-bottom: var(--spacing-lg);
}

/* Lien texte souligné (flèche qui avance au survol) */
.vitrine-link {
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vitrine-arrow {
	display: inline-block;
	transition: transform var(--dur-ui) var(--ease-out);
}

a:focus-visible .vitrine-arrow {
	transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
	a:hover .vitrine-arrow {
		transform: translateX(4px);
	}
}

/* --------------------------------------------------------------------------
   Cadre « viseur » : 4 coins d'équerre autour d'une photo.
   Les fonds sont des aplats (deux couleurs identiques) : aucun dégradé visible.
   Signature du site : à l'apparition de la photo ([data-reveal="media"]),
   les coins arrivent un peu larges puis se resserrent (mise au point), juste
   après le volet de l'image. Au survol (souris), les coins se resserrent
   encore un peu sur la photo : l'effet viseur.
   -------------------------------------------------------------------------- */
.viewfinder {
	position: relative;
}

.viewfinder::after {
	--vf-c: var(--color-black);
	--vf-l: 28px;
	--vf-t: 2px;
	content: '';
	position: absolute;
	inset: -12px;
	pointer-events: none;
	background:
		linear-gradient(var(--vf-c), var(--vf-c)) top left / var(--vf-l) var(--vf-t),
		linear-gradient(var(--vf-c), var(--vf-c)) top left / var(--vf-t) var(--vf-l),
		linear-gradient(var(--vf-c), var(--vf-c)) top right / var(--vf-l) var(--vf-t),
		linear-gradient(var(--vf-c), var(--vf-c)) top right / var(--vf-t) var(--vf-l),
		linear-gradient(var(--vf-c), var(--vf-c)) bottom left / var(--vf-l) var(--vf-t),
		linear-gradient(var(--vf-c), var(--vf-c)) bottom left / var(--vf-t) var(--vf-l),
		linear-gradient(var(--vf-c), var(--vf-c)) bottom right / var(--vf-l) var(--vf-t),
		linear-gradient(var(--vf-c), var(--vf-c)) bottom right / var(--vf-t) var(--vf-l);
	background-repeat: no-repeat;
}

/* scale plutôt que inset : reste sur le GPU, sans recalcul de mise en page.
   Le délai cale la mise au point sur la fin du volet (900ms). */
.viewfinder::after {
	transition: scale var(--dur-morph) var(--ease-out);
}

/* Apparition sur `transform`, survol sur `scale` : deux propriétés distinctes,
   donc le survol réagit sans attendre le délai de l'apparition. */
.has-reveal .viewfinder[data-reveal="media"]::after {
	opacity: 0;
	transform: scale(1.08);
	transition:
		opacity 400ms var(--ease-out) 450ms,
		transform 600ms var(--ease-out) 450ms,
		scale var(--dur-morph) var(--ease-out);
}

.has-reveal .viewfinder[data-reveal="media"].is-visible::after {
	opacity: 1;
	transform: none;
}

/* Mise au point au survol : les coins passent de 12px à ~4px de la photo */
@media (hover: hover) and (pointer: fine) {
	.viewfinder:hover::after {
		scale: 0.965;
	}
}

/* Image de section : ratio fixe (pas de saut de mise en page) */
.vitrine-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Hero : plein écran, contenu ancré en bas, horaires du jour à droite
   -------------------------------------------------------------------------- */
.vitrine-hero {
	min-height: clamp(560px, calc(100svh - 72px), 960px);
	align-items: flex-end;
	padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}

/* Voile de lisibilité : sombre sous le texte (bas gauche), photo libérée
   ailleurs. Exception assumée à la règle « pas de dégradé » : c'est un voile
   sur photo, pas un décor. */
.vitrine-hero__veil {
	background: linear-gradient(to top right,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.55) 35%,
			rgba(0, 0, 0, 0.15) 75%);
}

/* Mobile : le contenu occupe toute la largeur en bas, dégradé vertical */
@media (max-width: 768px) {
	.vitrine-hero__veil {
		background: linear-gradient(to top,
				rgba(0, 0, 0, 0.85) 0%,
				rgba(0, 0, 0, 0.6) 50%,
				rgba(0, 0, 0, 0.25) 100%);
	}
}

/* Entrée du hero : la photo recule légèrement, une seule fois par visite
   (pendant que le texte monte en cascade). Rogné par son conteneur. */
.vitrine-hero .hero-image {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.vitrine-hero .hero-image__img {
		animation: vitrine-hero-settle 1400ms var(--ease-out) both;
	}
}

@keyframes vitrine-hero-settle {
	from {
		transform: scale(1.06);
	}
}

.vitrine-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--spacing-xl);
}

.vitrine-hero__content {
	max-width: 900px;
}

.vitrine-hero__title {
	font-size: clamp(2.5rem, 7vw, 6rem);
	line-height: 0.98;
	letter-spacing: 0.02em;
	margin-bottom: var(--spacing-md);
}

.vitrine-hero__subtitle {
	max-width: 62ch;
	margin-bottom: var(--spacing-lg);
}

/* Bouton secondaire du hero : contour blanc lisible sur la photo */
.vitrine-hero .vitrine-hero__ghost {
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}

/* Vitrine : au survol, les boutons s'inversent (règles communes de
   components.css) sans se soulever. Sur fond sombre l'ombre est invisible
   et le soulèvement fait « gabarit » ; l'inversion nette suffit. */
.site-vitrine .wp-block-button__link:hover,
.site-vitrine .btn-black:hover,
.site-vitrine .btn-white:hover,
.site-vitrine .btn-outline:hover {
	transform: none;
	box-shadow: none;
}

.vitrine-hero .vitrine-hero__ghost:hover {
	background: #FFFFFF !important;
	color: #000000 !important;
}

/* Encart « Aujourd'hui » : vraie information (horaires), rempli par app.js */
.vitrine-today {
	display: grid;
	gap: 0.25rem;
	min-width: 240px;
	padding: var(--spacing-md);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(0, 0, 0, 0.6);
	text-decoration: none;
	transition:
		border-color var(--dur-ui) ease,
		scale var(--dur-press) var(--ease-out);
}

/* Dernier temps de la cascade du hero : apparaît après le titre et les
   boutons. Délai propre à l'apparition, pas au survol ni à la pression. */
.has-reveal .vitrine-hero__inner > .vitrine-today[data-reveal] {
	transition:
		opacity var(--dur-reveal) var(--ease-out) 300ms,
		transform var(--dur-reveal) var(--ease-out) 300ms,
		border-color var(--dur-ui) ease,
		scale var(--dur-press) var(--ease-out);
}

.vitrine-today[hidden] {
	display: none;
}

.vitrine-today:hover {
	color: #FFFFFF;
}

.vitrine-today:active {
	scale: 0.97;
}

@media (hover: hover) and (pointer: fine) {
	.vitrine-today:hover {
		border-color: #FFFFFF;
	}
}

.vitrine-today__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.7);
}

.vitrine-today__hours {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: 1.75rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.vitrine-today__more {
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Activités : 4 panneaux photo plein écran, le panneau survolé s'élargit
   -------------------------------------------------------------------------- */
.vitrine-range {
	padding: var(--spacing-3xl) 0 0;
}

.vitrine-range__title {
	margin-bottom: var(--spacing-lg);
}

.vitrine-range__track {
	display: flex;
	gap: 2px;
	height: clamp(370px, 60vh, 560px);
	background: var(--color-border);
}

.range-tile {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	color: #FFFFFF;
	background: var(--color-smoke);
	text-decoration: none;
}

/* Sélecteur à 2 classes : doit primer sur la règle d'apparition de base.css
   ([data-reveal="group"] > *), qui sinon écrase la transition d'élargissement.
   Une seule durée (--dur-morph) pour l'élargissement, la couleur et le voile :
   des durées décalées donnent un effet flou. */
.vitrine-range__track > .range-tile {
	transition:
		flex-grow var(--dur-morph) var(--ease-in-out),
		scale var(--dur-press) var(--ease-out),
		opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
}

.range-tile:hover,
.range-tile:focus-visible {
	color: #FFFFFF;
}

.range-tile:active {
	scale: 0.98;
}

/* Élargissement réservé au vrai survol (souris) et au clavier : sur écran
   tactile, le tap doit naviguer, pas déformer la rangée. */
.range-tile:focus-visible {
	flex-grow: 1.8;
}

@media (hover: hover) and (pointer: fine) {
	.range-tile:hover {
		flex-grow: 1.8;
	}
}

.range-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition:
		filter var(--dur-morph) var(--ease-in-out),
		transform var(--dur-morph) var(--ease-in-out);
}

/* Voile uni sous le texte : on fait varier son opacité (GPU), pas sa couleur.
   0.55 au repos → 0.35 actif (0.35 / 0.55 ≈ 0.64). */
.range-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.55);
	transition: opacity var(--dur-morph) var(--ease-in-out);
}

/* État « actif » d'une tuile : clavier, souris (ci-dessous) ou, sur écran
   tactile, tuile au centre de l'écran pendant le défilement (.is-active posée
   par app.js). Même rendu partout : la photo reprend ses couleurs. */
.range-tile:focus-visible .range-tile__img,
.range-tile.is-active .range-tile__img {
	filter: grayscale(0);
	transform: scale(1.04);
}

.range-tile:focus-visible::before,
.range-tile.is-active::before {
	opacity: 0.64;
}

@media (hover: hover) and (pointer: fine) {
	.range-tile:hover .range-tile__img {
		filter: grayscale(0);
		transform: scale(1.04);
	}

	.range-tile:hover::before {
		opacity: 0.64;
	}
}

/* Contenu de la tuile.
   Mobile / tactile : titre horizontal, description repliée (ligne de grille à
   0fr) qui se déplie quand la tuile est active ; le titre remonte d'un seul
   mouvement continu au lieu de sauter. */
.range-tile__body {
	position: relative;
	z-index: 2;
	display: grid;
	/* min-content (et non auto) : sinon la ligne du titre s'étire pendant
	   l'interpolation et le titre « respire » */
	grid-template-rows: min-content 0fr;
	width: 100%;
	padding: var(--spacing-lg);
	transition: grid-template-rows var(--dur-morph) var(--ease-in-out);
}

.range-tile__title {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: clamp(1.875rem, 7vw, 2.25rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0;
	color: inherit;
}

/* Description masquée par défaut, révélée à l'état actif (voir plus bas) */
.range-tile__text {
	display: block;
	min-height: 0;
	overflow: hidden;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0;
	transition: opacity var(--dur-ui) ease;
}

.range-tile__text-inner {
	display: block;
	padding-top: var(--spacing-xs);
	max-width: 46ch;
}

/* État actif : clavier, tuile au centre de l'écran (tactile, app.js),
   survol souris (bloc desktop ci-dessous) */
.range-tile:focus-visible .range-tile__body,
.range-tile.is-active .range-tile__body {
	grid-template-rows: min-content 1fr;
}

.range-tile:focus-visible .range-tile__text,
.range-tile.is-active .range-tile__text {
	opacity: 1;
	transition: opacity var(--dur-morph) var(--ease-out) 120ms;
}

/* Sans photo : panneau uni, texte en couleur de premier plan */
.range-tile--plain,
.range-tile--plain:hover {
	color: var(--color-black);
}

.range-tile--plain::before {
	display: none;
}

/* Desktop (souris) : même principe qu'en mobile (titre, puis description qui
   se déplie dessous), mais la zone de texte a une largeur FIGÉE, égale à celle
   d'une tuile rétrécie (rangée de 4 dont une élargie à 1.8 → 1/4.8 de la
   largeur). Le titre se coupe donc toujours au même endroit : pendant
   l'élargissement, rien ne se recompose, le bloc remonte d'un seul tenant. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
	/* Marges et titre proportionnels à l'écran : le mot le plus long
	   (« RESTAURATION ») tient dans la largeur figée, de 1024 à 1920px */
	.range-tile__body {
		flex-shrink: 0;
		width: calc((100vw - 6px) / 4.8);
		padding: clamp(1rem, 2.2vw, 2rem);
	}

	.range-tile__title {
		font-size: clamp(1.25rem, 2.1vw, 2.75rem);
	}

	.range-tile:hover .range-tile__body {
		grid-template-rows: min-content 1fr;
	}

	.range-tile:hover .range-tile__text {
		opacity: 1;
		transition: opacity var(--dur-morph) var(--ease-out) 120ms;
	}
}

/* --------------------------------------------------------------------------
   Bienvenue : texte dominant (7 col.), photo portrait décalée (4 col.)
   -------------------------------------------------------------------------- */
.vitrine-intro {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--spacing-3xl);
	align-items: start;
}

.vitrine-intro--text {
	grid-template-columns: minmax(0, 800px);
}

.vitrine-intro__media {
	margin-top: var(--spacing-3xl);
	aspect-ratio: 3 / 4;
}

.vitrine-richtext h3 {
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-sm);
}

.vitrine-richtext--lead p {
	font-size: 1.125rem;
	max-width: 60ch;
}

/* Avis légal : bandeau pleine largeur, marque carrée « ! » */
.vitrine-notice {
	display: flex;
	gap: var(--spacing-md);
	align-items: flex-start;
	margin-top: var(--spacing-lg);
	padding: var(--spacing-md) var(--spacing-lg);
	border: var(--border-light);
	border-left: var(--border-primary);
	font-size: 0.875rem;
	color: var(--color-gunmetal);
}

.vitrine-notice p {
	margin: 0;
	max-width: 90ch;
}

.vitrine-notice__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-weight: 700;
	background: var(--color-black);
	color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Formule découverte : photo | contenu (texte + liste en 2 colonnes),
   billet compact (prix + réservation) en bas à droite du contenu
   -------------------------------------------------------------------------- */
.vitrine-offer {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	border: var(--border-light);
	background: var(--color-white);
}

.vitrine-offer--text {
	grid-template-columns: minmax(0, 1fr);
}

.vitrine-offer__media {
	min-height: 100%;
}

.vitrine-offer__main {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-xl);
}

.vitrine-offer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
}

.vitrine-offer__subtitle {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-steel);
	margin: 0 0 var(--spacing-sm);
}

/* Billet : palette boutique (clair) pour faire ressortir l'offre.
   Talon (prix) | perforation pointillée | actions. */
.vitrine-offer__ticket {
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-gunmetal: #404040;
	--border-primary: 2px solid #000000;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-self: flex-end;
	width: min(100%, 640px);
	margin-top: auto;
	background: var(--color-white);
	color: var(--color-black);
}

.vitrine-offer__stub {
	padding: var(--spacing-md) var(--spacing-lg);
}

.vitrine-offer__price {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: 1.5rem;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0 0 var(--spacing-xs);
}

.vitrine-offer__booking {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-gunmetal);
	margin: 0;
}

.vitrine-offer__actions {
	display: grid;
	align-content: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-md);
	border-left: 2px dashed var(--color-gunmetal);
}

.vitrine-offer__actions .wp-block-button__link {
	padding: 0.75rem 1.25rem !important;
	font-size: 0.875rem;
	text-align: center;
	white-space: nowrap;
}

/* Liste « inclus » : coche dans un carré */
.vitrine-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.vitrine-checklist li {
	position: relative;
	padding-left: 2.25rem;
}

.vitrine-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25rem;
	height: 1.25rem;
	border: var(--border-primary);
}

.vitrine-checklist li::after {
	content: '';
	position: absolute;
	left: 0.45rem;
	top: calc(0.2em + 0.2rem);
	width: 0.35rem;
	height: 0.65rem;
	border: solid var(--color-black);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Armurerie : photo à gauche, grille de services à droite (cases à filets).
   Colonnes égales : les photos sont en paysage, elles prennent la place libre.
   -------------------------------------------------------------------------- */
.vitrine-armory {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-3xl);
	align-items: stretch;
}

.vitrine-armory--text {
	grid-template-columns: 1fr;
}

.vitrine-armory__media {
	min-height: 420px;
}

.vitrine-armory__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
}

.vitrine-armory__cell {
	display: flex;
	align-items: flex-end;
	min-height: 140px;
	padding: var(--spacing-md);
	background: var(--color-white);
	font-weight: 600;
	line-height: 1.4;
}

/* Les cases sont de simples listes (non cliquables) : aucun effet au survol.
   Seule la case CTA réagit. Même raison que .range-tile pour le sélecteur. */
.vitrine-armory__grid > .vitrine-armory__cell--cta {
	transition:
		background-color var(--dur-ui) ease,
		scale var(--dur-press) var(--ease-out),
		opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
}

/* Dernière case : lien boutique, en couleurs inversées */
.vitrine-armory__cell--cta {
	padding: 0;
	background: var(--color-black);
}

.vitrine-armory__cell--cta:active {
	scale: 0.98;
}

@media (hover: hover) and (pointer: fine) {
	.vitrine-armory__cell--cta:hover {
		background: var(--color-gunmetal);
	}
}

.vitrine-armory__cell--cta a {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-sm);
	width: 100%;
	height: 100%;
	padding: var(--spacing-md);
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.vitrine-armory__cell--cta a:hover {
	color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Carrousel photo (armurerie) : une photo à la fois, glisser pour changer.
   Les photos sont empilées et décalées par translateX (app.js) : la boucle
   est infinie sans dupliquer d'images. Pas de flèches : on glisse, ou on
   clique sur les barres de progression en bas de la photo.
   -------------------------------------------------------------------------- */
.vitrine-slider {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: var(--color-smoke);
}

.vitrine-slider__viewport {
	position: relative;
	height: 100%;
	touch-action: pan-y;   /* défilement vertical de la page conservé sur mobile */
	user-select: none;
	-webkit-user-select: none;
}

.vitrine-slider.is-ready .vitrine-slider__viewport {
	cursor: grab;
}

.vitrine-slider.is-dragging .vitrine-slider__viewport {
	cursor: grabbing;
}

.vitrine-slider__slide {
	position: absolute;
	inset: 0;
	transition: transform 650ms var(--ease-drawer);
}

/* Sans JS : seule la première photo est visible, pas de contrôles */
.vitrine-slider:not(.is-ready) .vitrine-slider__slide:not(:first-child),
.vitrine-slider:not(.is-ready) .vitrine-slider__dots {
	display: none;
}

.vitrine-slider__slide img {
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Barres : une par photo, celle en cours se remplit jusqu'au changement */
.vitrine-slider__dots {
	position: absolute;
	left: var(--spacing-sm);
	right: var(--spacing-sm);
	bottom: var(--spacing-xs);
	display: flex;
	gap: 6px;
}

.vitrine-slider__dot {
	position: relative;
	flex: 1 1 0;
	max-width: 48px;
	height: 24px;            /* zone cliquable confortable, trait de 2px */
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.vitrine-slider__dot::before,
.vitrine-slider__dot::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--color-white);
}

.vitrine-slider__dot::before {
	opacity: 0.4;
}

.vitrine-slider__dot::after {
	transform: scaleX(0);
	transform-origin: left center;
}

.vitrine-slider__dot[aria-current="true"]::after {
	transform: none;
}

/* Défilement auto : la barre active se remplit pendant l'intervalle (5s) ;
   app.js passe à la photo suivante à la fin de l'animation (animationend). */
.vitrine-slider.is-auto .vitrine-slider__dot[aria-current="true"]::after {
	animation: vitrine-slider-progress 5s linear forwards;
}

.vitrine-slider.is-paused .vitrine-slider__dot[aria-current="true"]::after {
	animation-play-state: paused;
}

@keyframes vitrine-slider-progress {
	from { transform: scaleX(0); }
	to { transform: none; }
}

.vitrine-slider__dot:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 0;
}

/* Volet d'apparition : porté par le carrousel (l'image n'est pas enfant direct) */
.has-reveal [data-reveal="media"] > .vitrine-slider {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 900ms var(--ease-in-out);
}

.has-reveal [data-reveal="media"].is-visible > .vitrine-slider {
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.vitrine-slider__slide {
		transition-duration: 1ms;
	}

	.has-reveal [data-reveal="media"] > .vitrine-slider {
		clip-path: none;
		opacity: 0;
		transition: opacity var(--dur-ui) ease;
	}

	.has-reveal [data-reveal="media"].is-visible > .vitrine-slider {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Cours : photo pleine largeur, panneau de texte ancré en bas à gauche
   -------------------------------------------------------------------------- */
.vitrine-cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 85vh, 820px);
	padding: var(--spacing-4xl) 0 var(--spacing-3xl);
	overflow: hidden;
}

.vitrine-cover--plain {
	min-height: 0;
	background: var(--color-smoke);
}

.vitrine-cover__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vitrine-cover__inner {
	position: relative;
	z-index: 2;
}

/* Le panneau est opaque : le voile n'a pas à garantir la lecture, il
   assombrit juste un peu la photo pour asseoir le panneau. */
.vitrine-cover > .overlay {
	opacity: 0.35;
}

.vitrine-cover__panel {
	max-width: 560px;
	padding: var(--spacing-xl);
	background: var(--color-white);
	border-top: var(--border-primary);
}

.vitrine-cover__panel .vitrine-richtext p:last-child {
	margin-bottom: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Bar : photo 8 colonnes, carte de texte qui la chevauche par la droite
   -------------------------------------------------------------------------- */
.vitrine-overlap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
}

.vitrine-overlap__media {
	grid-column: 1 / 9;
	grid-row: 1;
	aspect-ratio: 16 / 10;
}

.vitrine-overlap__card {
	grid-column: 7 / 13;
	grid-row: 1;
	position: relative;
	z-index: 1;
	margin-bottom: calc(var(--spacing-2xl) * -1);
	padding: var(--spacing-xl);
	background: var(--color-smoke);
	border: var(--border-light);
	border-top: var(--border-primary);
}

.vitrine-overlap--text .vitrine-overlap__card {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

#bar {
	padding-bottom: calc(var(--spacing-3xl) + var(--spacing-2xl));
}

/* Liste à puces carrées (géométrie militaire, pas d'arrondi) */
.vitrine-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vitrine-list li {
	position: relative;
	padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
}

.vitrine-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(var(--spacing-xs) + 0.6em);
	width: 8px;
	height: 8px;
	background: var(--color-black);
}

.vitrine-list--small {
	margin-top: var(--spacing-lg);
	font-size: 0.875rem;
	color: var(--color-gunmetal);
}

/* --------------------------------------------------------------------------
   Tarifs : carte des prix à points de conduite + abonnements en tuiles
   -------------------------------------------------------------------------- */
.vitrine-pricing {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--spacing-3xl);
}

.vitrine-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--spacing-sm);
}

.vitrine-menu__row {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-sm);
}

.vitrine-menu__leader {
	flex: 1 1 auto;
	min-width: var(--spacing-lg);
	border-bottom: 1px dotted var(--color-steel);
	transform: translateY(-0.3em);
}

.vitrine-menu__price {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vitrine-sub {
	padding: var(--spacing-lg);
	border: var(--border-primary);
	margin-bottom: var(--spacing-md);
}

/* Dernier abonnement (le plus complet) mis en avant en couleurs inversées */
.vitrine-sub:last-of-type {
	background: var(--color-black);
	color: var(--color-white);
}

.vitrine-sub__name {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-xs);
	color: inherit;
}

.vitrine-sub__text {
	margin: 0 0 var(--spacing-md);
	font-size: 0.9375rem;
}

.vitrine-sub__price {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: 2rem;
	line-height: 1;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Événements : bloc date en Stencil + texte
   -------------------------------------------------------------------------- */
.vitrine-events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--grid-gap);
}

.vitrine-event {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	border: var(--border-light);
}

.vitrine-event__date {
	display: grid;
	align-content: start;
	min-width: 88px;
	padding: var(--spacing-sm);
	text-align: center;
	background: var(--color-black);
	color: var(--color-white);
}

.vitrine-event__day {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: 2.5rem;
	line-height: 1;
}

.vitrine-event__month {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Horaires & contact : semaine jour par jour, numéro en grand
   -------------------------------------------------------------------------- */
.vitrine-visit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-3xl);
}

.vitrine-week {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--border-light);
}

.vitrine-week__day {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding: 0.75rem var(--spacing-sm);
	border-bottom: var(--border-light);
}

.vitrine-week__hours {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.vitrine-week__day.is-closed .vitrine-week__hours {
	color: var(--color-steel);
}

/* Jour du visiteur (classe posée par app.js) */
.vitrine-week__day.is-today {
	background: var(--color-black);
	color: var(--color-white);
	border-bottom-color: var(--color-black);
}

.vitrine-week__day.is-today .vitrine-week__hours {
	color: inherit;
}

.vitrine-visit__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-sm);
}

.vitrine-visit__phone {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--color-black);
	text-decoration: none;
}

.vitrine-visit__phone:hover {
	color: var(--color-gunmetal);
}

.vitrine-visit__address {
	font-style: normal;
	color: var(--color-gunmetal);
	margin-bottom: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	/* Découverte : texte puis liste, l'un sous l'autre */
	.vitrine-offer__cols {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.vitrine-offer__ticket {
		width: 100%;
	}
}

@media (max-width: 1024px) {
	.vitrine-hero__inner {
		grid-template-columns: 1fr;
	}

	.vitrine-today {
		justify-self: start;
	}

	.vitrine-intro,
	.vitrine-armory,
	.vitrine-pricing,
	.vitrine-visit {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.vitrine-intro__media {
		margin-top: 0;
		aspect-ratio: 16 / 10;
	}

	.vitrine-armory__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	/* Bar : la carte passe sous la photo, chevauchement réduit */
	.vitrine-overlap__media {
		grid-column: 1 / -1;
	}

	.vitrine-overlap__card {
		grid-column: 2 / -1;
		grid-row: 2;
		margin: calc(var(--spacing-2xl) * -1) 0 0;
	}

	#bar {
		padding-bottom: var(--spacing-3xl);
	}
}

@media (max-width: 768px) {
	/* Activités : panneaux empilés, description dépliée à l'état actif */
	.vitrine-range__track {
		flex-direction: column;
		height: auto;
	}

	.range-tile {
		min-height: 220px;
	}

	.vitrine-offer {
		grid-template-columns: 1fr;
	}

	.vitrine-offer__media {
		aspect-ratio: 16 / 10;
	}

	/* Billet : talon au-dessus, actions en dessous (perforation horizontale) */
	.vitrine-offer__ticket {
		grid-template-columns: 1fr;
	}

	.vitrine-offer__actions {
		border-left: 0;
		border-top: 2px dashed var(--color-gunmetal);
	}

	.vitrine-offer__actions .wp-block-button__link {
		padding: 0.75rem 0.5rem !important;
	}

	/* Cartes : 24px de marge intérieure (le texte reste à 40px du bord de
	   l'écran avec la gouttière du container) */
	.vitrine-offer__main,
	.vitrine-cover__panel,
	.vitrine-overlap__card {
		padding: var(--spacing-md);
	}

	/* Billet : bord à bord dans la carte, posé en bas, plutôt qu'un 3e niveau
	   de marge intérieure qui écrasait le prix et les boutons */
	.vitrine-offer__ticket {
		width: auto;
		margin: var(--spacing-xs) calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1);
	}

	.vitrine-offer__stub,
	.vitrine-offer__actions {
		padding: var(--spacing-md);
	}

	/* Liste « inclus » : coche plus petite et lignes resserrées */
	.vitrine-checklist {
		gap: var(--spacing-xs);
	}

	.vitrine-checklist li {
		padding-left: 1.75rem;
		line-height: 1.5;
	}

	.vitrine-checklist li::before {
		top: 0.2em;
		width: 1rem;
		height: 1rem;
	}

	.vitrine-checklist li::after {
		left: 0.36rem;
		top: calc(0.2em + 0.14rem);
		width: 0.28rem;
		height: 0.52rem;
	}

	.vitrine-armory__grid {
		grid-template-columns: 1fr;
	}

	.vitrine-armory__cell {
		min-height: 0;
	}

	/* Cours : la photo devient un bloc entier (sans voile) et le panneau
	   passe dessous en la chevauchant, comme la carte du bar. */
	.vitrine-cover {
		display: block;
		min-height: 0;
		padding: 0 0 var(--spacing-2xl);
	}

	.vitrine-cover__img {
		position: static;
		display: block;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.vitrine-cover > .overlay {
		display: none;
	}

	.vitrine-cover__panel {
		margin-top: calc(var(--spacing-xl) * -1);
	}

	.vitrine-cover--plain .vitrine-cover__panel {
		margin-top: 0;
	}

	.vitrine-overlap__card {
		grid-column: 1 / -1;
		margin-top: 0;
	}

	/* Mobile : la marque « ! » flotte à gauche, le texte l'entoure puis
	   reprend toute la largeur dessous (pas de colonne de texte rétrécie) */
	.vitrine-notice {
		display: block;
		padding: var(--spacing-md);
	}

	.vitrine-notice__mark {
		float: left;
		margin: 0.1em var(--spacing-sm) var(--spacing-xs) 0;
	}

	.vitrine-notice p {
		max-width: none;
	}

	/* Prix : libellé à gauche (peut passer à la ligne), montant aligné à droite */
	.vitrine-menu__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--spacing-sm);
		padding-bottom: var(--spacing-xs);
		border-bottom: 1px dotted var(--color-border);
	}

	.vitrine-menu__leader {
		display: none;
	}

	.viewfinder::after {
		inset: -8px;
		--vf-l: 20px;
	}
}

/* Mouvement réduit : pas d'élargissement animé, de zoom ni de mise au point.
   Les changements de couleur restent (ils informent), sans transition. */
@media (prefers-reduced-motion: reduce) {
	.vitrine-range__track > .range-tile,
	.range-tile__img,
	.range-tile::before,
	.range-tile__body,
	.range-tile__text,
	.range-tile:hover .range-tile__text,
	.range-tile:focus-visible .range-tile__text,
	.range-tile.is-active .range-tile__text,
	.vitrine-arrow {
		transition: none;
	}

	.has-reveal .viewfinder[data-reveal="media"]::after {
		transform: none;
		transition: opacity var(--dur-ui) ease;
	}

	.viewfinder:hover::after {
		scale: none;
	}

	.range-tile:hover .range-tile__img,
	.range-tile:focus-visible .range-tile__img,
	.range-tile.is-active .range-tile__img {
		transform: none;
	}
}