/**
 * LC — Catalogue de logements
 * Feuille de style de la carte.
 *
 * Toutes les couleurs sont des variables déclarées sur .lc-card : pour
 * accorder la carte à votre charte, redéfinissez-les dans le CSS du thème
 * enfant, sans toucher à ce fichier.
 *
 *   .lc-card { --lc-accent: #C2533E; --lc-ink: #1A1816; }
 */

/* ─── Grille du shortcode [lc_catalogue] ─────────────────────────────────── */
/* Par défaut la grille se remplit toute seule ; l'attribut colonnes fige le
   nombre de colonnes au-delà de 900 px. */
.lc-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 28px;
	align-items: stretch;
}

@media (min-width: 900px){
	.lc-grid--2{ grid-template-columns: repeat(2, 1fr); }
	.lc-grid--3{ grid-template-columns: repeat(3, 1fr); }
	.lc-grid--4{ grid-template-columns: repeat(4, 1fr); }
}

/* ─── Jetons ─────────────────────────────────────────────────────────────── */
.lc-card{
	--lc-ink:      #0D2430;
	--lc-muted:    #5A6B73;
	--lc-surface:  #FFFFFF;
	--lc-sand:     #E4DED3;
	--lc-wash:     #F4F1EC;
	--lc-accent:   #0F6E72;
	--lc-accent-d: #0A5255;
	--lc-gold:     #B07C22;
	--lc-radius:   14px;
	--lc-ratio:    4 / 3;
	--lc-shadow:   0 1px 2px rgba(13, 36, 48, .06), 0 8px 24px -12px rgba(13, 36, 48, .18);
	--lc-shadow-h: 0 2px 4px rgba(13, 36, 48, .08), 0 18px 40px -16px rgba(13, 36, 48, .28);
}

.lc-card,
.lc-card *{ box-sizing: border-box; }

.lc-card{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--lc-surface);
	border: 1px solid var(--lc-sand);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow);
	color: var(--lc-ink);
	font-family: inherit;   /* s'aligne sur la typographie du thème */
	font-size: 16px;
	line-height: 1.5;
	transition: box-shadow .28s ease, transform .28s ease;
}
.lc-card:hover{ box-shadow: var(--lc-shadow-h); transform: translateY(-2px); }

/* ─── Média / galerie ────────────────────────────────────────────────────── */
/* z-index 2 : le média passe au-dessus du lien étendu, pour que le balayage
   tactile et les flèches restent opérants. */
.lc-card__media{
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	background: var(--lc-wash);
}

.lc-card__track{
	display: flex;
	aspect-ratio: var(--lc-ratio);
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.lc-card__track::-webkit-scrollbar{ display: none; }

/* wp_get_attachment_image() ajoute width/height : on les neutralise ici. */
.lc-card__track img{
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: block;
}

/* Flèches */
.lc-card__nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(13, 36, 48, .22);
	color: var(--lc-ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.lc-card__nav svg{ width: 14px; height: 14px; display: block; }
.lc-card__nav--prev{ left: 10px; }
.lc-card__nav--next{ right: 10px; }
.lc-card:hover .lc-card__nav,
.lc-card__nav:focus-visible{ opacity: 1; }
.lc-card__nav:hover{ background: #fff; }
.lc-card__nav[disabled]{ opacity: 0 !important; pointer-events: none; }
@media (hover: none){ .lc-card__nav{ display: none; } }

/* Puces */
.lc-card__dots{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	gap: 6px;
	justify-content: center;
	pointer-events: none;
}
.lc-card__dot{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 2px rgba(13, 36, 48, .4);
	transition: background .2s ease, transform .2s ease;
}
.lc-card__dot[data-active="true"]{ background: #fff; transform: scale(1.35); }

/* Badge */
.lc-card__badge{
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 100px;
	background: rgba(13, 36, 48, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

/* ─── Contenu ────────────────────────────────────────────────────────────── */
.lc-card__body{
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: 20px;
}

.lc-card__eyebrow{
	margin: 0;
	color: var(--lc-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lc-card__title{
	margin: 0;
	font-size: 17px !important;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--lc-ink);
}
.lc-card__title a{
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--lc-accent), var(--lc-accent));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s ease;
}
.lc-card:hover .lc-card__title a{ background-size: 100% 1px; }

/* Lien étendu : toute la carte est cliquable, sauf le média et le bouton. */
.lc-card__title a::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lc-card__specs{
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--lc-muted);
	font-size: 14px;
}
.lc-card__specs li{ margin: 0; padding: 0; background: none; }
.lc-card__specs li + li::before{
	content: "·";
	margin-right: 8px;
	color: var(--lc-sand);
}

.lc-card__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
.lc-card__tags li{
	margin: 0;
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--lc-wash);
	color: #3E4F57;
	font-size: 12.5px;
	line-height: 1.4;
	white-space: nowrap;
}

.lc-card__sep{
	height: 1px;
	margin: 4px 0 0;
	border: 0;
	background: var(--lc-sand);
}

.lc-card__foot{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.lc-card__rating{
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.lc-card__rating svg{
	width: 13px;
	height: 13px;
	align-self: center;
	fill: var(--lc-gold);
}
.lc-card__score{ font-weight: 600; }
.lc-card__reviews{ color: var(--lc-muted); font-size: 13px; }

.lc-card__price{ margin: 0; font-size: 14px; color: var(--lc-muted); }
.lc-card__price strong{
	color: var(--lc-ink);
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.lc-card__cta{
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 16px;
	border-radius: 8px;
	background: #070707;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}
.lc-card__cta:hover,
.lc-card__cta:focus,
.lc-card:hover .lc-card__cta{ background: var(--lc-accent-d); color: #fff; }
.lc-card__cta svg{ width: 12px; height: 12px; }

/* ─── Accessibilité ──────────────────────────────────────────────────────── */
.lc-card a:focus-visible,
.lc-card button:focus-visible{
	outline: 2px solid var(--lc-accent);
	outline-offset: 2px;
	opacity: 1;
}
.lc-card__sr{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce){
	.lc-card,
	.lc-card *{ transition-duration: .01ms !important; }
	.lc-card:hover{ transform: none; }
}

/* ─── Intégration Elementor ──────────────────────────────────────────────── */
/* Le Loop Item impose ses propres marges et hauteurs : on les neutralise pour
   que la carte occupe exactement sa cellule et s'aligne avec ses voisines. */
.e-loop-item .lc-card,
.elementor-loop-item .lc-card{ height: 100%; }

.e-loop-item > .elementor,
.elementor-loop-item > .elementor{ height: 100%; }

.e-loop-item .elementor-widget-shortcode,
.elementor-loop-item .elementor-widget-shortcode,
.e-loop-item .elementor-shortcode,
.elementor-loop-item .elementor-shortcode{ height: 100%; }

/* Certains thèmes ajoutent une marge basse aux <p> et <ul> dans le contenu. */
.lc-card p,
.lc-card ul,
.lc-card li{ margin-block-end: 0; }