/**
 * Fiche produit — socle (conteneurs, fonds, boutons) + hero + buybox + pills de variation.
 *
 * Mobile-first, breakpoint unique 64em. Couleurs : custom properties uniquement (header.css).
 * Les sélecteurs `div.product.annad-fiche …` surclassent les float/largeurs de woocommerce.css.
 */

/* ---------- Socle ---------- */

/* Socle commun aux deux fiches : fond sombre (hors section Avantages, en fond clair) */
.annad-fiche {
	color: var(--color-on-surface);
	background-color: var(--color-surface); /* fond général des pages (maquette) */
}

.annad-hero,
.annad-sections,
.annad-downloads,
.annad-faq__inner,
.annad-suggested,
.single-product .woocommerce-breadcrumb {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Fil d'ariane : Montserrat Light 13px (fichier montserrat-300.woff2, assets/css/fonts.css) */
.single-product .woocommerce-breadcrumb {
	padding-block: 1rem;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 300;
	color:white;
}

/* Fil d'ariane : liens (les segments parents) en gris, la page courante — simple
   texte, sans lien — restant en blanc. Spécificité 0-2-1, identique à la règle
   WooCommerce `.woocommerce:where(body:not(.woocommerce-uses-block-theme))
   .woocommerce-breadcrumb a` (`:where()` ne compte pour rien) : à égalité, c'est
   la feuille du thème, chargée après, qui l'emporte. */
.single-product .woocommerce-breadcrumb a {
	color: #b8b8b8;
}

/* Fil d'ariane : lien survolé */
.woocommerce-breadcrumb a:hover{
color:white;

}
/* Image principale d'un produit : arrondi et ombre portés par l'image elle-même (galerie.css),
   jamais par la slide, plus large que l'image — sinon deux arrondis superposés. */


/* Boutons .annad-btn : assets/css/buttons.css (partagés fiche produit + Mon compte). */

/* ---------- Hero ---------- */

.annad-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	padding-block: 1.5rem 3rem;
}

@media (min-width: 64em) {
	.annad-hero {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
		gap: 4rem;
	}
}

.annad-hero__gallery {
	position: relative; /* ancrage du badge promo WooCommerce */
}

div.product.annad-fiche .annad-hero__buybox.summary {
	float: none;
	width: auto;
	margin: 0;
}

/* ---------- Buybox ---------- */

.annad-buybox {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.annad-buybox__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
	line-height: 1.1;
	text-wrap: balance; /* répartit le titre sur 2 lignes équilibrées, sans découpage en dur */
	overflow-wrap: anywhere;
}

.annad-buybox__subtitle {
	color: inherit;
	opacity: 0.75;
}

div.product.annad-fiche .annad-buybox__price .price {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: inherit;
}

.annad-buybox__excerpt > :last-child {
	margin-bottom: 0;
}

.annad-buybox__cta {
	align-self: stretch;
}

@media (min-width: 64em) {
	.annad-buybox__cta {
		align-self: flex-start;
	}
}

/* Réassurance livraison, sous les boutons d'achat de la fiche des moteurs
   (annad_theme_kit_shipping_line(), inc/product.php) : petite ligne, pictogramme discret. */
.annad-buybox__reassurance {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: color-mix(in srgb, var(--color-on-surface) 80%, transparent);
}

/* Pictogramme dans la couleur de la ligne, comme dans le footer — plus en vert (4.28.3). */
.annad-buybox__reassurance svg {
	flex: 0 0 auto;
}

/* Badges réassurance */
.annad-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.annad-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}

/* ---------- Zone d'achat (les deux fiches) : CTA configurateur facultatif + « Ajouter au panier » ---------- */
/*
 * Zone du bouton WooCommerce : .woocommerce-variation-add-to-cart (produit variable) ou
 * form.cart (produit simple). Le CTA (fiche principale uniquement) y est inséré par buybox-cart.php.
 * Ordre : champs du plugin Product Input Fields (pleine largeur) → CTA (ligne seule) → [quantité + bouton].
 * Le CTA et l'ajout au panier sont TOUJOURS visibles ensemble. Tout autre ajout de plugin dans
 * la zone est masqué (paiement express Stripe : voir aussi le repli plus bas).
 */

.annad-fiche .annad-buybox__cart .woocommerce-variation-add-to-cart,
.annad-fiche .annad-buybox__cart form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Écart vertical entre lignes (champs / CTA / groupe panier) ; écart horizontal réduit
	   pour coller la quantité à « Ajouter au panier », seuls items partageant une ligne. */
	gap: 0.75rem 0.5rem;
	margin: 1rem 0 0;
}

/* Clearfix de woocommerce.css : les pseudo-éléments deviendraient des items flex */
.annad-fiche .annad-buybox__cart .woocommerce-variation-add-to-cart::before,
.annad-fiche .annad-buybox__cart .woocommerce-variation-add-to-cart::after,
.annad-fiche .annad-buybox__cart form.cart:not(.variations_form)::before,
.annad-fiche .annad-buybox__cart form.cart:not(.variations_form)::after {
	display: none;
}

.annad-fiche .annad-buybox__cart .woocommerce-variation-add-to-cart > *,
.annad-fiche .annad-buybox__cart form.cart:not(.variations_form) > * {
	flex: 0 0 100%;
	order: -2;
}

.annad-fiche .annad-buybox__cart .woocommerce-variation-add-to-cart > :not(.single_add_to_cart_button):not(.annad-buybox__cta):not(.quantity):not(.alg-product-input-fields-table):not(:has(.alg-product-input-fields-table)),
.annad-fiche .annad-buybox__cart form.cart:not(.variations_form) > :not(.single_add_to_cart_button):not(.annad-buybox__cta):not(.quantity):not(.alg-product-input-fields-table):not(:has(.alg-product-input-fields-table)) {
	display: none;
}

/*
 * Toutes largeurs : CTA seul sur sa ligne en premier, puis quantité + « Ajouter au panier »
 * groupés sur la ligne suivante. Le CTA ne partage jamais sa ligne : la quantité ne peut plus
 * lui sembler rattachée, ni se retrouver séparée de son bouton par un retour à la ligne.
 */
/*
 * Sélecteurs en :is(…) > … : ils doivent passer devant la règle « > * » ci-dessus pour les DEUX
 * formes de zone. Écrits sans elle (.annad-buybox__cart .quantity), ils cédaient devant
 * `form.cart:not(.variations_form) > *` : sur un produit simple, la quantité et le bouton prenaient
 * chacun une ligne entière (constaté en 4.21.16), seuls les produits variables les alignaient.
 */
.annad-fiche .annad-buybox__cart :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) > .annad-buybox__cta {
	flex: 0 0 100%;
	order: -1;
}

/* Quantité | « Ajouter au panier » : même ligne à toutes les largeurs, la quantité à gauche */
.annad-fiche .annad-buybox__cart :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) > .quantity {
	flex: 0 0 auto;
	order: 0;
}

.annad-fiche .annad-buybox__cart :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) > .single_add_to_cart_button {
	flex: 1 1 0;
	order: 1;
	min-width: 0; /* libellé long sur écran étroit : il passe à la ligne dans le bouton, pas sous la quantité */
}

/* Desktop : CTA et bouton à largeur de contenu, groupe panier aligné à gauche sous le CTA */
@media (min-width: 64em) {
	.annad-fiche .annad-buybox__cart :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) > .annad-buybox__cta {
		flex: 0 0 auto;
		margin-right: 100%; /* force le retour à la ligne sans l'étirer */
	}

	.annad-fiche .annad-buybox__cart :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)) > .single_add_to_cart_button {
		flex: 0 1 auto;
	}
}

/* Sélecteur de quantité (champ natif WooCommerce). Sélecteurs renforcés : woocommerce.css
   impose float / marge / largeur via .woocommerce div.product form.cart div.quantity. */
div.product.annad-fiche .annad-buybox__cart form.cart div.quantity {
	float: none;
	margin: 0;
}

div.product.annad-fiche .annad-buybox__cart form.cart .quantity .qty {
	width: 4.5rem;
	min-height: 2.75rem;
	padding: 0.5rem;
	font: inherit;
	text-align: center;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--annad-btn-radius); /* même arrondi que « Ajouter au panier » (--radius vaut 0) */
}

div.product.annad-fiche .annad-buybox__cart form.cart .quantity .qty:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

/* « Ajouter au panier » : bouton secondaire (contour), le CTA configurateur reste le principal.
   Sélecteur renforcé pour passer devant les styles violets de woocommerce.css. */
div.product.annad-fiche .annad-buybox__cart .single_add_to_cart_button.button {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.625rem 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg);
	border: 1px solid var(--annad-btn-border);
	border-radius: var(--annad-btn-radius);
	box-shadow: var(--annad-btn-shadow);
	transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

div.product.annad-fiche .annad-buybox__cart .single_add_to_cart_button.button:hover {
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg-hover);
	box-shadow: var(--annad-btn-shadow-hover);
	transform: translateY(-1px);
}

div.product.annad-fiche .annad-buybox__cart .single_add_to_cart_button.button:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

/* ---------- Variations en pills (les deux fiches) ---------- */

.annad-variations--pills table.variations,
.annad-variations--pills table.variations tbody,
.annad-variations--pills table.variations tr,
.annad-variations--pills table.variations th,
.annad-variations--pills table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.annad-variations--pills table.variations tr + tr {
	margin-top: 1rem;
}

.annad-variations--pills table.variations th.label {
	margin-bottom: 0.5rem;
	font-weight: 600;
	text-align: left;
}

/* <select> natif conservé pour wc-add-to-cart-variation, masqué visuellement */
.variation-pills__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important; /* woocommerce.css impose min-width: 75% */
	margin: 0 !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.variation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.variation-pill {
	min-height: 2.5rem;
	padding: 0.375rem 1.125rem;
	color: inherit;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	transition: border-color var(--transition), background-color var(--transition);
}

.variation-pill:hover {
	border-color: currentColor;
}

.variation-pill[aria-pressed="true"] {
	color: var(--color-on-brand-green);
	background-color: var(--color-brand-green);
	border-color: var(--color-brand-green);
}

/* Grisée dans deux cas : variation en rupture (disabled), ou valeur sans variation pour le reste de
   la sélection (.is-unavailable, aria-disabled — WooCommerce la retire du <select>, variation-pills.js
   la garde affichée). Filet en pointillé pour la seconde : elle redevient disponible en changeant
   l'autre choix, pas la première. */
.variation-pill:disabled,
.variation-pill.is-unavailable {
	opacity: 0.4;
	text-decoration: line-through;
	cursor: not-allowed;
}

.variation-pill.is-unavailable {
	border-style: dashed;
}

.variation-pill.is-unavailable:hover {
	border-color: var(--color-border);
}

/* Explication des pills grisées, écrite par variation-pills.js (absente sans pill grisée) */
.variation-pills__hint {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--color-on-surface) 70%, transparent);
}

.variation-pills__hint[hidden] {
	display: none;
}

.variation-pill:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}


/* ---------- Plugin « Product Input Fields for WooCommerce » ---------- */
/* Habillage uniquement (le plugin s'injecte via les hooks de variation WooCommerce).
   Sélecteurs génériques sous la table du plugin : son markup interne n'est pas figé. */

.annad-buybox .alg-product-input-fields-table {
	width: 100%;
	margin: 1rem 0 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.annad-buybox .alg-product-input-fields-table tr,
.annad-buybox .alg-product-input-fields-table th,
.annad-buybox .alg-product-input-fields-table td {
	display: block;
	padding: 0;
	text-align: left;
	background: none;
	border: 0;
}

.annad-buybox .alg-product-input-fields-table tr + tr {
	margin-top: 1rem;
}

.annad-buybox .alg-product-input-fields-table label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.annad-buybox .alg-product-input-fields-table .required {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.annad-buybox .alg-product-input-fields-table input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.annad-buybox .alg-product-input-fields-table select,
.annad-buybox .alg-product-input-fields-table textarea {
	width: 100%;
	max-width: 28rem;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	font: inherit;
	color: var(--color-text);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.annad-buybox .alg-product-input-fields-table input:focus-visible,
.annad-buybox .alg-product-input-fields-table select:focus-visible,
.annad-buybox .alg-product-input-fields-table textarea:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.annad-btn,
	.variation-pill {
		transition: none;
	}
}

/* ---------- Liens dans le résumé produit (description courte saisie par Hugo) ---------- */

.annad-buybox__excerpt a {
	color: var(--color-brand-green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.annad-buybox__excerpt a:hover {
	text-decoration-thickness: 2px;
}

.annad-buybox__excerpt a:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

/* ---------- Paiement express Stripe : repli CSS ----------
   Retrait principal côté PHP (filtre wc_stripe_hide_payment_request_on_product_page, inc/product.php).
   Ce repli couvre une version du plugin qui ignorerait le filtre : conteneurs Express Checkout
   Element (wc-stripe-express-checkout-element…) et Payment Request Button. */
.single-product .annad-fiche [id^="wc-stripe-express-checkout"],
.single-product .annad-fiche [class*="wc-stripe-express-checkout"],
.single-product .annad-fiche wc-stripe-express-checkout-element,
.single-product .annad-fiche #wc-stripe-payment-request-wrapper,
.single-product .annad-fiche #wc-stripe-payment-request-button-separator,
.single-product .annad-fiche .wc-stripe-product-checkout-container {
	display: none !important;
}

/* ---------- Prix en double ----------
   Le prix affiché est .annad-buybox__price (sous le titre, [data-annad-price]). Deux prix natifs masqués :
   - div.price réinjecté dans le formulaire, au-dessus du bouton ;
   - .woocommerce-variation-price (prix de la variation choisie, dans .single_variation).
   display: none suffit : variation-pills.js ne lit pas ce bloc, il recopie variation.price_html reçu
   avec l'événement jQuery found_variation. L'élément reste dans le DOM et WooCommerce continue d'y
   écrire. Disponibilité (« En stock ») et reste de .single_variation non concernés. */
.annad-buybox__cart div.price,
.annad-buybox__cart .woocommerce-variation-price {
	display: none;
}

/* ---------- Badge de génération (sous le titre, aligné à droite) ----------
   Rendu par buybox-intro.php uniquement si le produit porte l'attribut « Génération moteur » :
   sans attribut, aucun markup n'est produit — rien à masquer ici. */
.annad-buybox__generation {
	margin: -0.25rem 0 0;
	text-align: right;
}

.annad-buybox__generation-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	/* Sans pastille : le vert annad porte seul la mise en évidence */
	color: var(--color-brand-green);
}

/* ---------- Description de variation (champ natif « Description » d'une variation) ----------
   Vide sur le site aujourd'hui : ce bloc n'est JAMAIS masqué, il doit rester lisible dès qu'une
   variation en contient. WooCommerce conserve le conteneur dans le DOM même sans texte, d'où
   l'absence de marge tant qu'il est vide. */
.annad-buybox .woocommerce-variation-description {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-on-surface) 80%, transparent);
}

.annad-buybox .woocommerce-variation-description:empty {
	margin-top: 0;
}

.annad-buybox .woocommerce-variation-description > :last-child {
	margin-bottom: 0;
}

/* Nom du produit mis en vert dans un titre de section (FAQ, Avantages) : voir
   annad_theme_product_title_with_name() (inc/product.php). */
.annad-name-highlight {
	color: var(--color-brand-green);
}

/* Mention « En stock » et lien « Effacer » (réinitialisation des variations) masqués sur la fiche.
   Seul l'état en stock est masqué : rupture et précommande (.out-of-stock, .available-on-backorder)
   restent affichées. Les éléments restent dans le DOM (wc-add-to-cart-variation les pilote) ;
   display: none l'emporte sur la visibility posée en ligne par WooCommerce sur .reset_variations. */
.annad-buybox .stock.in-stock,
.annad-buybox .reset_variations {
	display: none!important;
}

/* ---------- Police : Montserrat partout sur la fiche ----------
   Contrôles de formulaire et boutons injectés par WooCommerce ou des extensions : famille héritée,
   jamais la police système du navigateur. */
.annad-fiche button,
.annad-fiche input,
.annad-fiche select,
.annad-fiche textarea,
.annad-fiche .button,
.single-product .woocommerce-breadcrumb {
	font-family: var(--font-body);
}