/*
 * Halles Elementor Kit — styles
 *
 * Ce fichier ne contient QUE ce qu'Elementor gratuit ne sait pas faire :
 * la grille de commerçants, la barre de filtres, l'effet de survol des cartes
 * et le badge « eyebrow » du hero.
 * Tout le reste (couleurs, marges, typographies, ombres) est piloté depuis
 * l'éditeur Elementor : ici on se contente de lire des variables CSS.
 */

/* =====================================================================
 * 1. Grille de commerçants
 * ================================================================== */

/*
 * Les valeurs par défaut sont écrites en repli dans chaque var(), et NON dans
 * un bloc posé sur .halles-merchants.
 *
 * Elementor écrit les réglages du widget sur son conteneur extérieur
 * (.elementor-element-xxxx), d'où ils sont hérités. Or une propriété
 * personnalisée déclarée sur un élément l'emporte toujours sur la valeur
 * héritée d'un ancêtre : un bloc de valeurs par défaut sur .halles-merchants
 * masquerait donc tous les réglages de l'éditeur.
 */


/* Mode grille : toutes les fiches, empilées. */
.halles-merchants--grid .halles-merchants__grid {
	display: grid;
	grid-template-columns: repeat(var(--hm-cols, 4), minmax(0, 1fr));
	gap: var(--hm-gap, 24px);
}

/* Mode carrousel : une piste qui défile horizontalement.
   Le défilement natif du navigateur fait le gros du travail (glissé au doigt,
   inertie, molette, flèches du clavier) ; le script ne gère que les boutons.
   Sans JavaScript, la piste reste parfaitement utilisable. */
.halles-merchants--carousel .halles-merchants__grid {
	/* Une grille dont les colonnes se créent à la demande vers la droite :
	   --hm-rows lignes par écran, et autant de colonnes que de fiches. */
	display: grid;
	grid-template-rows: repeat(var(--hm-rows, 1), auto);
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--hm-cols, 4) - 1) * var(--hm-gap, 24px)) / var(--hm-cols, 4));
	align-content: start;
	gap: var(--hm-gap, 24px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* overflow-x força overflow-y à « auto » : sans cette réserve verticale,
	   l'ombre et le soulèvement au survol des fiches seraient rognés. */
	padding: 14px 0 34px;
	margin: -14px 0 -18px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.halles-merchants--carousel .halles-merchants__grid::-webkit-scrollbar {
	display: none;
}

.halles-merchants--carousel .halles-merchants__grid:focus-visible {
	outline: 2px solid var(--hm-filter-active-bg, #b40000);
	outline-offset: 4px;
}

.halles-merchants--carousel .halles-merchant {
	/* La largeur vient de grid-auto-columns ; chaque colonne est un point
	   d'arrêt du défilement. Sur plusieurs lignes, le script place chaque
	   fiche pour qu'on lise de gauche à droite puis ligne suivante. */
	scroll-snap-align: start;
	min-width: 0;
}

.halles-merchant {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--hm-card-bg, #ffffff);
	border-radius: var(--hm-card-radius, 28px);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.halles-merchants--lift .halles-merchant:hover,
.halles-merchants--lift .halles-merchant:focus-within {
	transform: translateY(var(--hm-lift, -5px));
}

.halles-merchant__visual {
	display: grid;
	place-items: center;
	height: var(--hm-visual-height, 210px);
	overflow: hidden;
	background: linear-gradient(135deg, var(--hm-visual-from, #ffffff), var(--hm-visual-to, #f5e7d6));
}

.halles-merchant__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.halles-merchant__initials {
	color: var(--hm-initials-color, #b40000);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
}

.halles-merchant__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--hm-body-padding, 23px);
}

.halles-merchant__badge {
	display: inline-flex;
	margin-bottom: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--hm-badge-bg, #fff8f0);
	color: var(--hm-badge-color, #b40000);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.4;
}

.halles-merchant__name {
	margin: 0 0 6px;
	color: var(--hm-name-color, #171717);
	font-size: 21px;
	line-height: 1.25;
}

.halles-merchant__desc {
	margin: 0;
	color: var(--hm-desc-color, #70665f);
	font-size: 14px;
}

.halles-merchant__link {
	margin-top: 15px;
	color: var(--hm-link-color, #b40000);
	font-size: 14px;
	font-weight: 900;
	text-decoration: none;
}

.halles-merchants--arrow .halles-merchant__link::after {
	content: " \2192";
}

.halles-merchant__link:hover,
.halles-merchant__link:focus-visible {
	text-decoration: underline;
}

/* Fiche masquée par un filtre. */
.halles-merchant[hidden] {
	display: none;
}

.halles-merchants__empty {
	margin: 0;
	padding: 24px 0;
	color: var(--hm-desc-color, #70665f);
	text-align: center;
}

.halles-merchants__empty[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
 * Navigation du carrousel (flèches + points)
 * ------------------------------------------------------------------ */

.halles-merchants__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: var(--hm-nav-spacing, 28px);
}

.halles-merchants__nav[hidden] {
	display: none;
}

.halles-merchants .halles-merchants__nav .halles-nav {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: var(--hm-arrow-size, 46px);
	height: var(--hm-arrow-size, 46px);
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	padding: 0;
	border: 1px solid var(--hm-filter-border, rgba(180, 0, 0, 0.16));
	border-radius: 999px;
	background: var(--hm-arrow-bg, #ffffff);
	color: var(--hm-arrow-color, #b40000);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.halles-merchants .halles-merchants__nav .halles-nav:hover:not(:disabled) {
	border-color: var(--hm-arrow-hover-bg, #b40000);
	background: var(--hm-arrow-hover-bg, #b40000);
	color: var(--hm-arrow-hover-color, #ffffff);
}

.halles-merchants .halles-merchants__nav .halles-nav:focus-visible {
	outline: 2px solid var(--hm-arrow-hover-bg, #b40000);
	outline-offset: 2px;
}

.halles-merchants .halles-merchants__nav .halles-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.halles-merchants .halles-merchants__nav .halles-nav svg {
	width: 55%;
	height: 55%;
}

.halles-merchants__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* Une douzaine de fiches à une par écran fait beaucoup de points :
	   on les laisse passer à la ligne plutôt que déborder. */
	max-width: 60%;
	gap: 8px;
}

.halles-merchants .halles-merchants__dots .halles-dot {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--hm-dot-color, rgba(180, 0, 0, 0.22));
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.halles-merchants .halles-merchants__dots .halles-dot[aria-current="true"] {
	width: 26px;
	background: var(--hm-dot-active-color, #b40000);
}

.halles-merchants .halles-merchants__dots .halles-dot:focus-visible {
	outline: 2px solid var(--hm-dot-active-color, #b40000);
	outline-offset: 3px;
}

/* =====================================================================
 * 2. Barre de filtres
 * ================================================================== */

.halles-merchants__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--hm-filters-justify, center);
	gap: 9px;
	margin-bottom: var(--hm-filters-gap-bottom, 34px);
}

.halles-merchants .halles-merchants__filters .halles-filter {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: auto;
	height: auto;

	padding: 10px 16px;
	border: 1px solid var(--hm-filter-border, rgba(180, 0, 0, 0.16));
	border-radius: 999px;
	background: var(--hm-filter-bg, #ffffff);
	color: var(--hm-filter-color, #171717);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.halles-merchants .halles-merchants__filters .halles-filter:hover,
.halles-merchants .halles-merchants__filters .halles-filter.is-active {
	border-color: var(--hm-filter-active-bg, #b40000);
	background: var(--hm-filter-active-bg, #b40000);
	color: var(--hm-filter-active-color, #ffffff);
}

.halles-merchants .halles-merchants__filters .halles-filter:focus-visible {
	outline: 2px solid var(--hm-filter-active-bg, #b40000);
	outline-offset: 2px;
}

/* =====================================================================
 * 3. Finitions réutilisables dans la page Elementor
 * ================================================================== */

/* Badge « Marché couvert à Angoulême » du hero.
   La couleur du texte reste réglable dans Elementor (Style > Couleur du titre). */
.halles-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid var(--halles-eyebrow-border, rgba(255, 255, 255, 0.28));
	border-radius: 999px;
	background: var(--halles-eyebrow-bg, rgba(255, 255, 255, 0.12));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Effet « la carte se soulève au survol », à poser en classe CSS sur
   n'importe quel conteneur Elementor. */
.halles-lift {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.halles-lift:hover,
.halles-lift:focus-within {
	transform: translateY(-5px);
}

/* Sécurité : la vidéo de fond du hero doit toujours remplir le cadre. */
.halles-hero .elementor-background-video-container,
.halles-hero .elementor-background-video-hosted {
	object-fit: cover;
}

.halles-hero .elementor-background-video-hosted {
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.halles-lift,
	.halles-merchant,
	.halles-merchants .halles-merchants__filters .halles-filter,
	.halles-merchants .halles-merchants__nav .halles-nav,
	.halles-merchants .halles-merchants__dots .halles-dot {
		transition: none;
	}

	.halles-merchants--carousel .halles-merchants__grid {
		scroll-behavior: auto;
	}

	.halles-lift:hover,
	.halles-lift:focus-within,
	.halles-merchants--lift .halles-merchant:hover,
	.halles-merchants--lift .halles-merchant:focus-within {
		transform: none;
	}
}

/* =====================================================================
 * 4. Galerie photos (pages commerçants)
 *
 * Trois photos de largeur identique, quel que soit l'écran. Rien ne
 * s'élargit au survol : c'est le ruban entier qui coulisse.
 * Les valeurs par défaut sont des replis dans var() — voir la note du
 * paragraphe 1 sur la cascade Elementor.
 * ================================================================== */

.halles-gallery {
	display: flex;
	flex-direction: column;
}

.halles-gallery--controls-above {
	flex-direction: column-reverse;
}

.halles-gallery__viewport {
	/* Sans JavaScript, la galerie reste consultable au défilement. */
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: var(--hg-radius, 22px);
	overscroll-behavior-x: contain;
}

.halles-gallery--enhanced .halles-gallery__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.halles-gallery__viewport:focus-visible {
	outline: 3px solid var(--hg-btn-hover-bg, #b40000);
	outline-offset: 5px;
}

.halles-gallery__track {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: var(--hg-gap, 14px);
	transform: translate3d(0, 0, 0);
}

.halles-gallery--enhanced .halles-gallery__track {
	will-change: transform;
	transition: transform var(--hg-duration, 650ms) cubic-bezier(0.25, 0.7, 0.25, 1);
}

/* Le retour invisible en fin de boucle ne doit pas être animé. */
.halles-gallery--enhanced .halles-gallery__track--resetting {
	transition: none;
}

.halles-gallery__slide {
	position: relative;
	flex: 0 0 calc((100% - (var(--hg-visible, 3) - 1) * var(--hg-gap, 14px)) / var(--hg-visible, 3));
	min-width: 0;
	height: var(--hg-height, 390px);
	overflow: hidden;
	border-radius: var(--hg-radius, 22px);
	background: #f6eee5;
	user-select: none;
}

.halles-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.halles-gallery__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--hg-overlay, rgba(0, 0, 0, 0.68)), transparent 52%);
	pointer-events: none;
}

.halles-gallery__caption {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 20px;
	left: 18px;
	pointer-events: none;
}

.halles-gallery__caption span {
	display: block;
	color: var(--hg-number-color, rgba(255, 255, 255, 0.85));
	font-size: 11px;
	letter-spacing: 0.08em;
}

.halles-gallery__caption strong {
	display: block;
	margin-top: 5px;
	color: var(--hg-caption-color, #ffffff);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.halles-gallery__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--hg-controls-justify, flex-start);
	gap: 10px;
	margin-top: var(--hg-controls-spacing, 28px);
}

.halles-gallery--controls-above .halles-gallery__controls {
	margin-top: 0;
	margin-bottom: var(--hg-controls-spacing, 28px);
}

.halles-gallery__controls[hidden] {
	display: none;
}

.halles-gallery .halles-gallery__controls .halles-gallery__btn {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: var(--hg-btn-size, 46px);
	height: var(--hg-btn-size, 46px);
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--hg-btn-border, rgba(180, 0, 0, 0.2));
	border-radius: 50%;
	background: var(--hg-btn-bg, #fff8f0);
	color: var(--hg-btn-color, #b40000);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.halles-gallery .halles-gallery__controls .halles-gallery__btn:hover:not(:disabled) {
	border-color: var(--hg-btn-hover-bg, #b40000);
	background: var(--hg-btn-hover-bg, #b40000);
	color: var(--hg-btn-hover-color, #ffffff);
}

.halles-gallery .halles-gallery__controls .halles-gallery__btn:focus-visible {
	outline: 3px solid var(--hg-btn-hover-bg, #b40000);
	outline-offset: 4px;
}

.halles-gallery .halles-gallery__controls .halles-gallery__btn:disabled {
	cursor: default;
	opacity: 0.4;
}

.halles-gallery .halles-gallery__controls .halles-gallery__btn svg {
	display: block;
	flex: 0 0 auto;
	width: 45%;
	height: 45%;
	max-width: none;
}

.halles-gallery .halles-gallery__controls .halles-gallery__btn svg[hidden] {
	display: none;
}

.halles-gallery__counter {
	margin-left: 4px;
	color: var(--hg-counter-color, #6d645f);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Pastille de texte : le fond d'un widget Titre est réservé à Elementor Pro,
   on le fournit donc par une classe (valeurs « Qualité / Terroir / Partage »). */
.halles-pill .elementor-heading-title {
	display: inline-block;
	padding: 9px 13px;
	border-radius: 999px;
	background: var(--halles-pill-bg, #ffffff);
}

/* Médaillon du hero : la rotation et le flou d'arrière-plan n'ont pas de
   contrôle natif. Taille, bordure, fond et arrondi restent réglables. */
.halles-medallion {
	transform: rotate(-7deg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.halles-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.halles-gallery {
		--hg-duration: 0ms;
	}

	.halles-gallery .halles-gallery__controls .halles-gallery__btn {
		transition: none;
	}
}