/* Access'Hôtel — Carrousel Catalogue
 * Réutilise le MOTEUR et le CSS de base du carrousel de cartes (carousel.css : .ahc,
 * .ahc__viewport, .ahc__track, .ahc__slide, flèches, points…). Ici seul le DESIGN de la
 * carte change : image 16:9 unique, badge en haut à droite, bouton-titre centré à cheval
 * sur l'image, puis texte. Les hauteurs de cartes restent égales grâce au flex du moteur
 * (.ahc__slide) et à la carte en colonne pleine hauteur.
 */

.ahc--catalog {
	--ahccat-badge-size: 64px;
	--ahccat-badge-bg: #6a1b7a;
	--ahccat-badge-color: #ffffff;
	--ahccat-badge-icon-size: 30px;
	--ahccat-badge-radius: 50%;
	--ahccat-badge-offset: 12px;
	--ahccat-btn-radius: 22px;
	--ahccat-btn-overlap: 20px;
}

.ahccat__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ahc-card-bg, #ffffff);
	border-radius: var(--ahc-radius, 12px);
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* --- Image 16:9 (une seule) --- */
.ahccat__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #eceff1;
	flex: 0 0 auto;
}

.ahccat__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* --- Badge en haut à droite (image ou icône) --- */
.ahccat__badge {
	position: absolute;
	top: var(--ahccat-badge-offset);
	right: var(--ahccat-badge-offset);
	width: var(--ahccat-badge-size);
	height: var(--ahccat-badge-size);
	border-radius: var(--ahccat-badge-radius);
	background: var(--ahccat-badge-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 2;
}

.ahccat__badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ahccat__badge i {
	font-size: var(--ahccat-badge-icon-size);
	line-height: 1;
	color: var(--ahccat-badge-color);
}

.ahccat__badge svg {
	width: 1em;
	height: 1em;
	font-size: var(--ahccat-badge-icon-size);
	fill: currentColor;
	color: var(--ahccat-badge-color);
}

/* --- Corps : bouton-titre centré (à cheval sur l'image) + texte --- */
.ahccat__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: center;
	padding: 0 20px 22px;
	text-align: center;
}

/* Couleur du texte et fond du bouton : appliqués par les sélecteurs Elementor directement sur
 * .ahccat__btn / :hover / :active (spécificité suffisante pour battre la couleur de lien imposée
 * par le thème). Ici on ne pose que les valeurs par défaut de repli. */
.ahccat__btn {
	display: inline-block;
	align-self: center;
	margin-top: calc(-1 * var(--ahccat-btn-overlap));
	margin-bottom: 14px;
	position: relative;
	z-index: 3;
	background: #1FA1CC;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 22px;
	border-radius: var(--ahccat-btn-radius);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ahccat__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: var(--ahc-lines, 5);
	line-clamp: var(--ahc-lines, 5);
	-webkit-box-orient: vertical;
	overflow: hidden;
}