/* Cœur « favori » de la fiche produit SEULEMENT (inc/favori-fiche.php), lot 1, v2 du 20/10/2026 :
   vide = contour fin gris très foncé ; dans les favoris = rempli en noir ; sans rond ni bordure ni fond ;
   zone de toucher invisible 44 px (48 px téléphone). Cœurs de l'en-tête et des listes non touchés.
   v3 (20/10/2026) : dessin centré dans sa zone (marge à droite, il n'est plus collé au bord), seuil téléphone
   768 px comme le titre (style.css l. 3908), hauteur alignée sur la 1re ligne du titre par le script
   (valeurs ci-dessous = secours sans script). */

/* Le cœur se place à droite du titre ; le titre lui laisse la place. */
.single-product .summary .variant-holder {
	position: relative;
}

.single-product .summary .variant-holder > .product_title {
	padding-right: 52px;
}

.anaaz-favori {
	position: absolute;
	top: -8px; /* centré sur la 1re ligne du titre (hauteur de ligne 28 px) */
	right: 0; /* jamais au-delà du bloc : pas de défilement horizontal */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 2;
}

.anaaz-favori__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center; /* dessin au centre de sa zone : marge à droite */
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: #2b2b2b;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.anaaz-favori__bouton:hover,
.anaaz-favori__bouton:active {
	background: transparent;
	color: #000;
}

.anaaz-favori__bouton:focus {
	outline: none;
}

.anaaz-favori__bouton:focus-visible {
	outline: 2px solid #1c2b36;
	outline-offset: -2px;
}

.anaaz-favori__bouton[disabled] {
	cursor: default;
	opacity: 0.5;
}

.anaaz-favori__coeur {
	display: block;
	width: 24px;
	height: 24px;
	overflow: visible;
}

.anaaz-favori__coeur path {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill 0.15s ease;
}

/* Dans les favoris : cœur rempli en noir (la forme pleine se voit, pas seulement la couleur). */
.anaaz-favori--plein .anaaz-favori__bouton {
	color: #000;
}

.anaaz-favori--plein .anaaz-favori__coeur path {
	fill: #000;
	stroke: #000;
}

/* Très légère animation à l'ajout */
.anaaz-favori--anime .anaaz-favori__coeur {
	animation: anaazFavoriAjout 0.32s ease-out;
}

@keyframes anaazFavoriAjout {
	0% { transform: scale(1); }
	45% { transform: scale(1.18); }
	100% { transform: scale(1); }
}

.anaaz-favori__message {
	position: absolute; /* ne pousse rien : posé sous le cœur, par-dessus, pendant 3 s */
	top: 100%;
	right: 0;
	margin-top: 2px;
	padding: 2px 8px;
	border-radius: 4px;
	background: #1c2b36;
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.anaaz-favori__message--visible {
	opacity: 1;
}

/* Téléphone : zone de toucher 48 px (même seuil que le titre du thème) */
@media (max-width: 768px) {
	.single-product .summary .variant-holder > .product_title {
		padding-right: 56px;
	}

	.anaaz-favori {
		top: -14px; /* 1re ligne du titre : hauteur de ligne 20 px */
	}

	.anaaz-favori__bouton {
		width: 48px;
		height: 48px;
	}

	.anaaz-favori__coeur {
		width: 26px;
		height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anaaz-favori--anime .anaaz-favori__coeur {
		animation: none;
	}

	.anaaz-favori__coeur path,
	.anaaz-favori__message {
		transition: none;
	}
}