/* Ajout rapide depuis les cartes produit (inc/ajout-rapide.php), v5 du 20/10/2026 : comme la v4, plus la marge
   de 14 px sous la photo des cartes (WooCommerce) déplacée hors du cadre (voir « Repère = la photo »). v4 du 20/10/2026 (v3 corrigée après mesure :
   sélecteurs « .woocommerce » sans « body » devant, la classe est sur le body des pages WooCommerce ; accueil :
   « grid-row: 1 / 2 » pour placer les boutons dans la case de la photo).
   CŒUR (en haut à droite) et « + » (en bas à droite) : UN SEUL FORMAT, défini une fois par les variables ci-dessous,
   sur toutes les cartes (Boutique, catégories, recherche, Favoris, accueil, page vendeur, produits suggérés, bloc
   collection de la fiche), à toutes les largeurs d'écran. Repère : le cadre de la PHOTO (.img-holder, case de la photo
   dans la grille de l'accueil, zone de la taille de la photo pour les boucles WooCommerce).
   Pourquoi la v2 était fausse (mesures réelles, Edge sans fenêtre, 20/10/2026 13:15) :
   - accueil : les cartes sont étirées à la même hauteur par la grille du bloc ; la 1re rangée de la carte prenait ce
     surplus et le « + », aligné en bas de cette rangée, tombait de 0 à 18 px sous la photo selon la longueur du nom ;
   - page vendeur, téléphone : store-page.css l. 2284-2296 réduit le cœur à 25 × 25 px à 7 px du bord ;
   - bloc collection, tablette et téléphone : responsive.css l. 563-566 réduit le cœur des carrousels (scale 0,7) ;
   - partout : marge de 20 px au bord droit (celle du cœur de la Boutique), jugée trop grande.
   Les !important sont nécessaires : les règles du thème qu'ils remplacent en ont (style.css l. 9587, store-page.css). */

:root {
	--anaaz-btn-taille: 32px;   /* largeur = hauteur des deux boutons */
	--anaaz-btn-marge: 8px;     /* bord droit de la photo (les deux), haut (cœur), bas (« + ») ; = marge des badges */
	--anaaz-btn-rayon: 6px;
	--anaaz-btn-icone: 16px;    /* cœur et « + » dessinés à la même taille */
	--anaaz-btn-toucher: 6px;   /* bord invisible autour : 32 + 2 × 6 = 44 px de zone de toucher */
}

/* Ancien « + » (custom.js, custom_add_to_cart) : masqué. Le message « toaster » n'est plus déclenché. */
.woocommerce ul.products li.product .img-holder > .plus-btn,
body #wcfmmp-store .anaaz-vendor-plus {
	display: none !important;
}

/* ---------- Format commun ---------- */

.woocommerce ul.products li.product .img-holder > .like-btn,
body #wcfmmp-store .anaaz-vendor-like,
body .anaaz-favorite-card > .anaaz-coeur-carte,
body .products-slider .img-holder > a.like-btn.anaaz-coeur-carte,
body .anaaz-ajout-rapide-zone > .anaaz-coeur-carte,
body a.anaaz-ajout-rapide.anaaz-ajout-rapide {
	position: absolute !important;
	z-index: 3;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: var(--anaaz-btn-taille) !important;
	height: var(--anaaz-btn-taille) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--anaaz-btn-rayon) !important;
	background: #fff;
	box-shadow: none !important;
	transform: none !important;
	line-height: 1 !important;
	left: auto !important;
	right: var(--anaaz-btn-marge) !important;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Cœurs : en haut */
.woocommerce ul.products li.product .img-holder > .like-btn,
body #wcfmmp-store .anaaz-vendor-like,
body .anaaz-favorite-card > .anaaz-coeur-carte,
body .products-slider .img-holder > a.like-btn.anaaz-coeur-carte,
body .anaaz-ajout-rapide-zone > .anaaz-coeur-carte {
	top: var(--anaaz-btn-marge) !important;
	bottom: auto !important;
}

/* « + » : en bas */
body a.anaaz-ajout-rapide.anaaz-ajout-rapide {
	top: auto !important;
	bottom: var(--anaaz-btn-marge) !important;
	color: #111;
}

/* Icônes à la même taille */
.woocommerce ul.products li.product .img-holder > .like-btn i,
body #wcfmmp-store .anaaz-vendor-like i,
body .anaaz-favorite-card > .anaaz-coeur-carte i,
body .products-slider .img-holder > a.like-btn.anaaz-coeur-carte i,
body .anaaz-ajout-rapide-zone > .anaaz-coeur-carte i {
	position: static !important;
	top: auto !important;
	display: block;
	font-size: var(--anaaz-btn-icone) !important;
	line-height: 1 !important;
	transition: transform 0.3s ease;
}

.woocommerce ul.products li.product .img-holder > .like-btn:hover i,
body #wcfmmp-store .anaaz-vendor-like:hover i,
body .anaaz-coeur-carte:hover i {
	transform: scale(1.1);
}

body a.anaaz-ajout-rapide.anaaz-ajout-rapide svg {
	display: block;
	width: var(--anaaz-btn-icone);
	height: var(--anaaz-btn-icone);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Zone de toucher ≥ 44 px (bord invisible) */
.woocommerce ul.products li.product .img-holder > .like-btn::before,
body #wcfmmp-store .anaaz-vendor-like::before,
body .anaaz-coeur-carte::before,
body a.anaaz-ajout-rapide.anaaz-ajout-rapide::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--anaaz-btn-toucher));
}

body a.anaaz-ajout-rapide.anaaz-ajout-rapide:hover {
	background: #f2f2f2;
	color: #000;
}

.anaaz-ajout-rapide:focus,
.anaaz-coeur-carte:focus {
	outline: none;
}

.anaaz-ajout-rapide:focus-visible,
.anaaz-coeur-carte:focus-visible,
.woocommerce ul.products li.product .img-holder > .like-btn:focus-visible,
#wcfmmp-store .anaaz-vendor-like:focus-visible {
	outline: 2px solid #1c2b36;
	outline-offset: 2px;
}

/* Pendant l'appel : petit cercle qui tourne, bouton inactif. */
.anaaz-ajout-rapide.anaaz-occupe {
	cursor: progress;
	pointer-events: none;
}

.anaaz-ajout-rapide.anaaz-occupe svg {
	opacity: 0;
}

.anaaz-ajout-rapide.anaaz-occupe::after,
.anaaz-choix__ajouter.anaaz-occupe::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid #c9c9c9;
	border-top-color: #1c2b36;
	border-radius: 50%;
	animation: anaazTourne 0.8s linear infinite;
}

@keyframes anaazTourne {
	to { transform: rotate(360deg); }
}

/* Carrousels .products-slider (bloc collection) : règle du thème qui étire les liens de la photo, même dans le CSS
   utilisé (UCSS) déjà en cache : style.css l. 9573 « .products-slider .img-holder > a:not(.plus-btn):not(.like-btn) »
   (display:block !important ; height:100% !important). Sélecteur plus précis pour le « + ». */
.products-slider .img-holder > a.anaaz-ajout-rapide:not(.plus-btn):not(.like-btn) {
	display: flex !important;
	width: var(--anaaz-btn-taille) !important;
	height: var(--anaaz-btn-taille) !important;
}

/* ---------- Repère = la photo ---------- */

/* Cartes du thème (Boutique, catégories, recherche, Favoris) : WooCommerce met une marge de 1 em (14 px) sous la photo
   (woocommerce.css « .woocommerce ul.products li.product a img { margin: 0 0 1em } »). Au-dessus de 600 px le cadre
   .img-holder suit la photo et contient donc ces 14 px : le « + », placé à 8 px du bas du CADRE, finissait 6 px SOUS la
   photo (mesuré, toutes largeurs et tous zooms). La marge passe de la photo au cadre : même espace avant le nom du
   produit, cadre = photo. Jusqu'à 600 px, le cadre a déjà la forme de la photo (style.css l. 3042) : rien ne change. */
.woocommerce ul.products li.product .img-holder > a > img {
	margin-bottom: 0;
}

@media (min-width: 601px) {
	.woocommerce ul.products li.product .img-holder {
		margin-bottom: 1em;
	}
}

/* Accueil (5 blocs) : cœur et « + » sont après le lien de la photo ; la 1re rangée de la grille de la carte a
   exactement la hauteur de la photo (le surplus d'étirement va à la 2e rangée), et les deux boutons, placés dans
   cette rangée, s'y positionnent comme dans le cadre de la photo. */
.anaaz-favorite-card:has(> .anaaz-ajout-rapide),
.anaaz-favorite-card:has(> .anaaz-coeur-carte) {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
}

.anaaz-favorite-card > .anaaz-favorite-image,
.anaaz-favorite-card > .anaaz-ajout-rapide,
.anaaz-favorite-card > .anaaz-coeur-carte {
	grid-row: 1 / 2; /* « 1 / 2 » et non « 1 » : pour un élément en position absolue, « 1 » irait jusqu'au bas de la carte */
	grid-column: 1 / 2;
}

.anaaz-favorite-card > .anaaz-favorite-info {
	grid-row: 2;
	grid-column: 1;
}

/* Boucles WooCommerce (page vendeur, produits suggérés) : zone de la taille de la photo. */
.anaaz-ajout-rapide-zone {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	aspect-ratio: 3 / 4; /* photos de la page vendeur (store-page.css) */
	z-index: 3;
	pointer-events: none;
}

.anaaz-ajout-rapide-zone > a {
	pointer-events: auto;
}

.related-products .up-sells .anaaz-ajout-rapide-zone {
	aspect-ratio: auto;
	height: 450px; /* style.css : photos des produits suggérés */
}

@media (max-width: 1024px) {
	.related-products .up-sells .anaaz-ajout-rapide-zone {
		height: 400px;
	}
}

@media (max-width: 767px) {
	.related-products .up-sells .anaaz-ajout-rapide-zone {
		height: 320px;
	}
}

/* Badges : s'arrêtent avant le cœur sur toutes les cartes (marge + taille du cœur + 6 px d'écart). */
.woocommerce ul.products li.product .img-holder > .anaaz-badges,
body #wcfmmp-store ul.products li.product .anaaz-badges,
body .anaaz-favorite-image > .anaaz-badges,
body .products-slider .img-holder > .anaaz-badges,
body .related-products .up-sells li.product .anaaz-badges {
	max-width: min(65%, calc(100% - var(--anaaz-btn-marge) - var(--anaaz-btn-taille) - var(--anaaz-btn-marge) - 6px));
}

/* ---------- Panneau de choix (produits à variantes) ---------- */

html.anaaz-choix-ouvert {
	overflow: hidden;
}

.anaaz-choix-fond {
	position: fixed;
	inset: 0;
	z-index: 1002; /* au-dessus de l'en-tête et du panneau « Ajouté au panier » (1001) */
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.anaaz-choix-fond--ouvert {
	opacity: 1;
}

.anaaz-choix {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1003;
	box-sizing: border-box;
	width: 460px;
	max-width: calc(100vw - 32px);
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	background: #fff;
	color: #111;
	border-radius: 8px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	transform: translate(-50%, -46%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.anaaz-choix--ouvert {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.anaaz-choix-fond[hidden],
.anaaz-choix[hidden],
.anaaz-ar-erreur[hidden] {
	display: none !important;
}

.anaaz-choix p {
	margin: 0;
}

.anaaz-choix__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.anaaz-choix__titre {
	font-weight: 600;
	font-size: 15px;
}

.anaaz-choix__fermer,
.anaaz-ar-erreur__fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: -8px -8px -8px auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #111;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.anaaz-choix__fermer:hover,
.anaaz-ar-erreur__fermer:hover {
	background: #f2f2f2;
}

.anaaz-choix__fermer:focus-visible,
.anaaz-choix__ajouter:focus-visible,
.anaaz-choix__fiche:focus-visible,
.anaaz-ar-erreur__fermer:focus-visible,
.anaaz-ar-erreur__lien:focus-visible {
	outline: 2px solid #1c2b36;
	outline-offset: 2px;
}

.anaaz-choix__chargement {
	padding: 24px 0;
	color: #444;
	text-align: center;
}

.anaaz-choix__produit {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 14px;
}

/* Grande image (suit la couleur choisie) */
.anaaz-choix__image {
	flex: 0 0 120px;
}

.anaaz-choix__image img {
	display: block;
	width: 120px;
	height: 160px;
	object-fit: cover;
	object-position: top center;
	border-radius: 6px;
	background: #f4f4f4;
}

.anaaz-choix__infos {
	min-width: 0;
}

.anaaz-choix__nom {
	font-weight: 600;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.anaaz-choix__prix {
	margin-top: 6px !important;
	font-weight: 600;
}

.anaaz-choix__prix del {
	color: #666;
	font-weight: 400;
	margin-right: 4px;
}

.anaaz-choix__prix ins {
	text-decoration: none;
}

.anaaz-choix__option {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.anaaz-choix__legende {
	margin: 0 0 8px;
	padding: 0;
	font-weight: 600;
}

.anaaz-choix__choisi {
	font-weight: 400;
}

.anaaz-choix__valeurs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Tailles (et options sans photo) : boutons texte */
.anaaz-choix__valeur {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #bdbdbd;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-weight: 400;
	cursor: pointer;
}

.anaaz-choix__valeur input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.anaaz-choix__valeur:has(input:checked) {
	border: 2px solid #1c2b36;
	padding: 0 11px;
	font-weight: 600;
}

.anaaz-choix__valeur:has(input:focus-visible) {
	outline: 2px solid #1c2b36;
	outline-offset: 2px;
}

.anaaz-choix__valeur--epuisee {
	border-style: dashed;
	background: #f3f3f3;
	color: #6f6f6f;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Couleurs : vignettes avec la photo de la variante, nom dessous */
.anaaz-choix__valeurs--photos {
	align-items: flex-start;
	gap: 10px;
}

.anaaz-choix__valeur--photo {
	flex: 0 0 64px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	width: 64px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
}

.anaaz-choix__valeur--photo:has(input:checked) {
	border: 0;
	padding: 0;
}

/* v3 : toutes les vignettes exactement 56 × 56 px (photo recadrée sans déformation, ou cadre avec le nom si la
   couleur n'a pas de photo) ; les règles générales des images du thème ne s'appliquent pas (!important). */
.anaaz-choix .anaaz-choix__vignette {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	box-sizing: border-box !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px;
	max-width: 56px !important;
	max-height: 56px !important;
	margin: 0 !important;
	padding: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	object-position: top center;
	overflow: hidden;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	background: #f4f4f4;
}

/* Couleur sans photo : même cadre, nom dedans (2 lignes au plus). */
.anaaz-choix .anaaz-choix__vignette--texte {
	padding: 4px;
	color: #111;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
	hyphens: auto;
}

.anaaz-choix .anaaz-choix__vignette--texte span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.anaaz-choix__valeur--photo:has(input:checked) .anaaz-choix__vignette {
	border: 2px solid #1c2b36;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c2b36; /* sélection bien visible */
}

/* Nom sous chaque vignette : une ligne, coupé proprement (…) ; même hauteur pour toutes. */
.anaaz-choix__valeur--photo .anaaz-choix__texte {
	display: block;
	width: 64px;
	height: 16px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 16px;
}

.anaaz-choix__valeur--photo:has(input:focus-visible) {
	outline: none;
}

.anaaz-choix__valeur--photo:has(input:focus-visible) .anaaz-choix__vignette {
	outline: 2px solid #1c2b36;
	outline-offset: 4px;
}

/* Couleur épuisée : grisée et barrée */
.anaaz-choix__valeur--photo.anaaz-choix__valeur--epuisee {
	background: transparent;
	border: 0;
	color: #6f6f6f;
	text-decoration: line-through;
}

.anaaz-choix__valeur--photo.anaaz-choix__valeur--epuisee .anaaz-choix__vignette {
	opacity: 0.45;
	filter: grayscale(1);
	border-style: dashed;
}

.anaaz-choix__valeur--photo.anaaz-choix__valeur--epuisee::after {
	content: "";
	position: absolute;
	top: 27px;
	left: 4px;
	width: 56px;
	height: 2px;
	background: #6f6f6f;
	transform: rotate(-45deg);
}

/* Option manquante : même style que sur la fiche (options-manquantes-v1.css). */
.anaaz-choix__option.anaaz-option-manquante {
	margin-left: -8px;
	margin-right: -8px;
	padding: 8px;
	border-radius: 4px;
	background: #fdf0ef;
}

.anaaz-choix__option.anaaz-option-manquante .anaaz-choix__valeurs {
	outline: 2px solid #e8a39c;
	outline-offset: 4px;
	border-radius: 4px;
}

.anaaz-choix .anaaz-option-erreur {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0 !important;
	color: #a1271b; /* ≈ 6,7:1 sur #fdf0ef, ≈ 7,4:1 sur blanc */
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.anaaz-choix .anaaz-option-erreur__icone,
.anaaz-ar-erreur .anaaz-option-erreur__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #a1271b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.anaaz-choix__lien,
.anaaz-ar-erreur__lien {
	color: #1c2b36;
	text-decoration: underline;
}

.anaaz-choix__ajouter {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin: 4px 0 0;
	padding: 0 16px;
	border: 1px solid #1c2b36;
	border-radius: 4px;
	background: #1c2b36;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.anaaz-choix__ajouter:hover {
	background: #2c4152;
}

.anaaz-choix__ajouter.anaaz-occupe {
	cursor: progress;
	opacity: 0.85;
}

.anaaz-choix__ajouter.anaaz-occupe::after {
	position: static;
	border-color: rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
}

.anaaz-choix__fiche {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 4px;
	color: #1c2b36;
	font-size: 14px;
	text-decoration: underline;
}

.anaaz-visuellement-cache {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Téléphone : feuille qui monte du bas. */
@media (max-width: 767px) {
	.anaaz-choix {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		max-height: 88vh;
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		border-radius: 12px 12px 0 0;
		transform: translateY(24px);
	}

	.anaaz-choix--ouvert {
		transform: none;
	}

	.anaaz-choix__image {
		flex-basis: 96px;
	}

	.anaaz-choix__image img {
		width: 96px;
		height: 128px;
	}
}

/* Message d'erreur d'un ajout (produit simple) */
.anaaz-ar-erreur {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 1004;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: 420px;
	max-width: calc(100vw - 32px);
	padding: 8px 8px 8px 14px;
	border-left: 4px solid #a1271b;
	border-radius: 6px;
	background: #fff;
	color: #111;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	font-size: 14px;
	line-height: 1.4;
	transform: translateX(-50%);
}

.anaaz-ar-erreur__texte {
	flex: 1 1 200px;
}

@media (prefers-reduced-motion: reduce) {
	.anaaz-choix,
	.anaaz-choix-fond {
		transition: none;
	}

	.anaaz-coeur-carte i {
		transition: none;
	}

	.anaaz-ajout-rapide.anaaz-occupe::after,
	.anaaz-choix__ajouter.anaaz-occupe::after {
		animation-duration: 2s;
	}
}