/*
 * Boutons de WooCommerce : ajout au panier de la fiche, « Valider la commande »
 * du panier, « Commander » de la commande (blocs Panier et Commande), et les
 * boutons .button des gabarits classiques du compte client (pages .commerce).
 * Ils portent leurs propres classes et non .wp-block-button__link, mais c'est
 * le MÊME bouton pour la charte. Plutôt que de recopier son apparence dans
 * product-single.css — deux définitions qui divergeraient au premier
 * ajustement — on l'ajoute aux sélecteurs de ce module. Les couleurs et la
 * taille propres à la fiche produit se règlent, elles, dans product-single.css
 * via --btn-*.
 */
/*
 * Drache d'Avril — Système de boutons (bloc core/button).
 *
 * Principe : tout est piloté par les contrôles NATIFS de Gutenberg, zéro JS.
 *   - Taille  = contrôle « Taille de police » du bloc (sm / md / lg).
 *               Toute la géométrie est en `em`, donc changer la police
 *               fait scaler padding, radius et ombre d'un seul tenant.
 *   - Couleur = sélecteur « Couleur d'arrière-plan » du bloc (palette theme.json).
 *               La couleur de texte lisible est appliquée automatiquement
 *               (clair -> texte foncé, foncé -> texte blanc), sauf si on
 *               choisit un texte à la main (override préservé).
 *   - Style   = « Fill » (plein) / « Outline » (contour), les deux styles
 *               natifs du bloc, restylés au look sticker neo-memphis.
 *
 * Le fond et le texte par défaut (lilas / ink) sont posés dans theme.json
 * (styles.elements.button) pour que l'éditeur affiche le bon défaut. Ici on
 * ne porte que la géométrie, le sticker, les états et le mapping couleur.
 *
 * Tokens consommés : var(--wp--preset--color--*), définis par theme.json.
 */

/* ------------------------------------------------------------------ *
 * 1. Base — géométrie en em (scale avec la taille de police)
 * ------------------------------------------------------------------ */

.wp-block-button__link,
.woocommerce .produit-hero__achat .single_add_to_cart_button,
.commerce .wc-block-cart__submit-button,
.commerce .wc-block-components-checkout-place-order-button,
.commerce .woocommerce .button {
	/* couleur de marque du bouton : sert au contour et à l'ombre.
	   Défaut = lilas (cohérent avec le fond par défaut de theme.json). */
	--btn-c: var(--wp--preset--color--lilas);
	/* couleur de l'ombre sticker (style audit : violet désaturé). */
	--btn-shadow: var(--wp--preset--color--rose-04);
	/* rebond du sticker : ressort amorti à 2 rebonds.
	   linear() (et pas cubic-bezier, qui ne peut faire qu'un seul dépassement) :
	   suite de points temps/progression. Pics ~1.39 puis ~1.05 = deux rebonds
	   décroissants, avec une légère anticipation au départ. */
	--btn-ease: linear(0, -0.04 3%, 0 7%, 0.290 12%, 0.696 16%, 1.069 20%, 1.312 23%, 1.394 27%, 1.340 31%, 1.206 35%, 1.052 39%, 0.929 42%, 0.863 46%, 0.855 50%, 0.891 54%, 0.947 58%, 1.002 62%, 1.040 66%, 1.055 69%, 1.051 73%, 1.033 77%, 1.011 81%, 0.992 85%, 0.982 88%, 0.979 92%, 0.983 96%, 1);
	--btn-dur: 520ms;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em; /* icône <> label (audit recommandait 8 plutôt que 4) */

	padding: 1em 1.5rem;        /* md (16px) -> 16/24, hauteur ~48px */
	border: 0.125em solid transparent; /* réservé pour le contour, évite le saut */
	border-radius: 1em;        /* md -> 16px */
	line-height: 1;
	text-decoration: none;
	cursor: pointer;

	box-shadow: 0 0.5em 0 0 var(--btn-shadow); /* md -> ombre pleine 8px */
	transform: translateY(0);
	transition:
		transform var(--btn-dur) var(--btn-ease),
		box-shadow var(--btn-dur) var(--btn-ease),
		background-color 120ms ease,
		color 120ms ease;
}

/* ------------------------------------------------------------------ *
 * 2. Sticker — hover / active / focus / disabled
 * ------------------------------------------------------------------ */

.wp-block-button__link:hover,
.woocommerce .produit-hero__achat .single_add_to_cart_button:hover,
.commerce .wc-block-cart__submit-button:hover,
.commerce .wc-block-components-checkout-place-order-button:hover,
.commerce .woocommerce .button:hover {
	transform: translateY(0.125em);
	box-shadow: 0 0.375em 0 0 var(--btn-shadow);
}

.wp-block-button__link:active,
.woocommerce .produit-hero__achat .single_add_to_cart_button:active,
.commerce .wc-block-cart__submit-button:active,
.commerce .wc-block-components-checkout-place-order-button:active,
.commerce .woocommerce .button:active {
	transform: translateY(0.5em);
	box-shadow: 0 0 0 0 var(--btn-shadow); /* totalement « appuyé » */
}

.wp-block-button__link:focus-visible,
.woocommerce .produit-hero__achat .single_add_to_cart_button:focus-visible,
.commerce .wc-block-cart__submit-button:focus-visible,
.commerce .wc-block-components-checkout-place-order-button:focus-visible,
.commerce .woocommerce .button:focus-visible {
	outline: 0.1875em solid var(--wp--preset--color--violet);
	outline-offset: 0.125em;
}

.wp-block-button__link[disabled],
.wp-block-button__link[aria-disabled="true"],
.wp-block-button.is-disabled .wp-block-button__link,
.woocommerce .produit-hero__achat .single_add_to_cart_button.disabled,
.woocommerce .produit-hero__achat .single_add_to_cart_button:disabled,
.commerce .wc-block-cart__submit-button[aria-disabled="true"],
.commerce .wc-block-components-checkout-place-order-button:disabled,
.commerce .woocommerce .button:disabled {
	opacity: 0.5;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 3. Style CONTOUR (is-style-outline)
 *    Fond transparent, bordure + texte = couleur choisie (--btn-c).
 *    Note : un contour sur couleur très claire (lilas) a un faible
 *    contraste sur fond blanc. À réserver aux tons moyens/foncés
 *    (violet, orange, noir...).
 * ------------------------------------------------------------------ */

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	background-color: transparent;
	color: var(--btn-c);
	border-color: var(--btn-c);
}

/*
 * Reprise de la géométrie sur le style contour.
 *
 * WordPress livre sa propre variation is-style-outline, qui impose
 * « padding: calc(.667em + 2px) calc(1.333em + 2px) » et « border: 2px solid ».
 * Deux dégâts : le bouton contour est plus bas que le bouton plein à taille de
 * police égale, et le raccourci border remet la couleur à currentColor, donc le
 * contour prend la couleur du texte au lieu de --btn-c.
 *
 * Son sélecteur est en (0,3,0), d'où le nôtre en (0,4,0) : c'est le seul moyen
 * de reprendre la main sans !important. Tout reste en em, comme le reste du
 * système, donc la géométrie continue de suivre la taille de police.
 */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	padding: 1em 1.5em;
	border-width: 0.125em;
	border-style: solid;
	border-color: var(--btn-c);
}

/* ------------------------------------------------------------------ *
 * 4. Mapping couleur — chaque fond définit --btn-c
 *    (consommé par le contour et l'ombre). Ajouter une couleur plus
 *    tard = ajouter une ligne ici + l'avoir dans la palette theme.json.
 * ------------------------------------------------------------------ */

.wp-block-button__link.has-orange-background-color { --btn-c: var(--wp--preset--color--orange); }
.wp-block-button__link.has-violet-background-color { --btn-c: var(--wp--preset--color--violet); }
.wp-block-button__link.has-pink-background-color { --btn-c: var(--wp--preset--color--pink); }
.wp-block-button__link.has-yellow-background-color { --btn-c: var(--wp--preset--color--yellow); }
.wp-block-button__link.has-lilas-background-color { --btn-c: var(--wp--preset--color--lilas); }
.wp-block-button__link.has-green-background-color { --btn-c: var(--wp--preset--color--green); }
.wp-block-button__link.has-vert-01-background-color { --btn-c: var(--wp--preset--color--vert-01); }
.wp-block-button__link.has-vert-02-background-color { --btn-c: var(--wp--preset--color--vert-02); }
.wp-block-button__link.has-vert-03-background-color { --btn-c: var(--wp--preset--color--vert-03); }
.wp-block-button__link.has-vert-04-background-color { --btn-c: var(--wp--preset--color--vert-04); }
.wp-block-button__link.has-vert-05-background-color { --btn-c: var(--wp--preset--color--vert-05); }
.wp-block-button__link.has-vert-06-background-color { --btn-c: var(--wp--preset--color--vert-06); }
.wp-block-button__link.has-vert-07-background-color { --btn-c: var(--wp--preset--color--vert-07); }
.wp-block-button__link.has-rose-01-background-color { --btn-c: var(--wp--preset--color--rose-01); }
.wp-block-button__link.has-rose-02-background-color { --btn-c: var(--wp--preset--color--rose-02); }
.wp-block-button__link.has-rose-03-background-color { --btn-c: var(--wp--preset--color--rose-03); }
.wp-block-button__link.has-rose-04-background-color { --btn-c: var(--wp--preset--color--rose-04); }
.wp-block-button__link.has-rouge-01-background-color { --btn-c: var(--wp--preset--color--rouge-01); }
.wp-block-button__link.has-rouge-02-background-color { --btn-c: var(--wp--preset--color--rouge-02); }
.wp-block-button__link.has-rouge-03-background-color { --btn-c: var(--wp--preset--color--rouge-03); }
.wp-block-button__link.has-rouge-04-background-color { --btn-c: var(--wp--preset--color--rouge-04); }
.wp-block-button__link.has-rouge-05-background-color { --btn-c: var(--wp--preset--color--rouge-05); }
.wp-block-button__link.has-rouge-06-background-color { --btn-c: var(--wp--preset--color--rouge-06); }
.wp-block-button__link.has-rouge-07-background-color { --btn-c: var(--wp--preset--color--rouge-07); }
.wp-block-button__link.has-bleu-01-background-color { --btn-c: var(--wp--preset--color--bleu-01); }
.wp-block-button__link.has-bleu-02-background-color { --btn-c: var(--wp--preset--color--bleu-02); }
.wp-block-button__link.has-bleu-03-background-color { --btn-c: var(--wp--preset--color--bleu-03); }
.wp-block-button__link.has-bleu-04-background-color { --btn-c: var(--wp--preset--color--bleu-04); }
.wp-block-button__link.has-jaune-01-background-color { --btn-c: var(--wp--preset--color--jaune-01); }
.wp-block-button__link.has-jaune-02-background-color { --btn-c: var(--wp--preset--color--jaune-02); }
.wp-block-button__link.has-blanc-background-color { --btn-c: var(--wp--preset--color--blanc); }
.wp-block-button__link.has-noir-background-color { --btn-c: var(--wp--preset--color--noir); }

/* ------------------------------------------------------------------ *
 * 5. Texte auto sur fonds foncés (style plein uniquement)
 *    Le `:not(.has-text-color)` garantit qu'un choix manuel de couleur
 *    de texte reprend toujours la main. Liste = fonds dont le meilleur
 *    contraste est obtenu avec du blanc (calcul WCAG).
 *    Tons clairs non listés : restent sur le texte foncé par défaut (ink).
 * ------------------------------------------------------------------ */

.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-orange-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-violet-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-green-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-vert-01-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-vert-02-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-vert-03-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-rose-01-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-rose-04-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-rouge-01-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-rouge-02-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-rouge-04-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-rouge-05-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-bleu-01-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-bleu-02-background-color:not(.has-text-color),
.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-noir-background-color:not(.has-text-color) {
	color: #fff;
}