/* Holdon — Favoris : bouton cœur, grille, invite connexion. Palette bronze v2. */

:root {
	--holdon-fav-bronze: #8b6914;
	--holdon-fav-bronze-deep: #6e5210;
	--holdon-fav-beige: #fdf9f3;
	--holdon-fav-gris: #2a3138;
}

/* ---- Bouton cœur ---- */
.holdon-fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(139, 105, 20, 0.26);
	border-radius: 50%;
	background: rgba(253, 249, 243, 0.92);
	color: var(--holdon-fav-gris);
	cursor: pointer;
	line-height: 0;
	transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
	-webkit-appearance: none;
	appearance: none;
}
.holdon-fav-btn:hover { border-color: var(--holdon-fav-bronze); transform: translateY(-1px); }
.holdon-fav-btn:focus-visible { outline: 2px solid var(--holdon-fav-bronze); outline-offset: 2px; }

.holdon-fav-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	transition: fill .25s ease, stroke .25s ease, transform .25s ease;
}

/* État actif (favori) : cœur plein bronze */
.holdon-fav-btn[data-state="on"] { color: var(--holdon-fav-bronze); border-color: var(--holdon-fav-bronze); }
.holdon-fav-btn[data-state="on"] .holdon-fav-icon { fill: var(--holdon-fav-bronze); stroke: var(--holdon-fav-bronze); }

/* Variante avec label (ex. fiche produit) */
.holdon-fav-btn.has-label,
.holdon-fav-btn:has(.holdon-fav-label) {
	width: auto;
	border-radius: 999px;
	padding: 0 16px;
	height: 40px;
}
.holdon-fav-label { font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; letter-spacing: .02em; }

/* Feedback au clic */
.holdon-fav-btn.is-loading { opacity: .55; pointer-events: none; }
.holdon-fav-btn.just-toggled .holdon-fav-icon { transform: scale(1.25); }

/* Bouton flottant dans une carte média */
.holdon-fav-card-media { position: relative; }
.holdon-fav-card-media .holdon-fav-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	box-shadow: 0 4px 14px -8px rgba(42, 49, 56, .5);
}

/* ---- Grille de favoris ---- */
.holdon-fav-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
@media (max-width: 880px) { .holdon-fav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .holdon-fav-grid { grid-template-columns: 1fr; } }

.holdon-fav-card {
	display: flex;
	flex-direction: column;
	background: var(--holdon-fav-beige);
	border: 1px solid rgba(139, 105, 20, 0.18);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color .3s, transform .3s, box-shadow .3s;
}
.holdon-fav-card:hover {
	border-color: var(--holdon-fav-bronze);
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -22px rgba(139, 105, 20, 0.45);
}
.holdon-fav-card .v2-card-media,
.holdon-fav-card .holdon-fav-card-media {
	aspect-ratio: 4 / 5;
	background: #f5ecdb;
	overflow: hidden;
}
.holdon-fav-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; display: block; }
.holdon-fav-card:hover .holdon-fav-card-media img { transform: scale(1.04); }

.holdon-fav-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.holdon-fav-card-body h3 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 1.2; }
.holdon-fav-card-body h3 a { color: var(--holdon-fav-gris); text-decoration: none; }
.holdon-fav-card-link {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--holdon-fav-bronze);
	text-decoration: none;
}
.holdon-fav-card-link:hover { color: var(--holdon-fav-bronze-deep); }

/* ---- États vides / invité ---- */
.holdon-fav-empty { text-align: center; padding: 48px 20px; }
.holdon-fav-empty h2 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--holdon-fav-gris); }
.holdon-fav-empty p { color: #5b6168; max-width: 480px; margin: 8px auto 22px; }
.holdon-fav-cta {
	display: inline-block;
	padding: 13px 28px;
	background: var(--holdon-fav-bronze);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	font-family: 'Outfit', system-ui, sans-serif;
	letter-spacing: .04em;
	transition: background .25s;
}
.holdon-fav-cta:hover { background: var(--holdon-fav-bronze-deep); color: #fff; }

/* ---- Modale invite ---- */
.holdon-fav-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 49, 56, .55);
	padding: 20px;
}
.holdon-fav-modal-box {
	position: relative;
	background: var(--holdon-fav-beige);
	max-width: 440px;
	width: 100%;
	padding: 40px 34px 34px;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0 30px 80px -30px rgba(42, 49, 56, .6);
}
.holdon-fav-modal-box h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; margin: 0 0 10px; color: var(--holdon-fav-gris); }
.holdon-fav-modal-box p { color: #5b6168; margin: 0 0 22px; }
.holdon-fav-modal-close {
	position: absolute; top: 12px; right: 14px;
	background: none; border: 0; font-size: 26px; line-height: 1;
	color: #5b6168; cursor: pointer;
}
.holdon-fav-modal-cancel {
	display: block; margin: 14px auto 0;
	background: none; border: 0; cursor: pointer;
	color: #5b6168; text-decoration: underline; font-size: 13px;
}