/*
 * Boutons globaux du site.
 *
 * Source unique de vérité pour les boutons : les pages et gabarits du page
 * builder n'ont qu'à appliquer les classes ci-dessous, sans redéfinir de
 * styles locaux.
 *
 *   <a class="puqc-btn puqc-btn-primary">   Bouton principal (repris du
 *                                           bouton « Découvrir notre
 *                                           mission » du hero de l'accueil)
 *   <a class="puqc-btn puqc-btn-secondary"> Bouton secondaire (bouton blanc)
 *
 * Les variantes utilisent un sélecteur à deux classes pour l'emporter sur
 * les anciennes définitions locales de .puqc-btn encore présentes dans le
 * CSS de certains gabarits (ex. : l'en-tête), quel que soit l'ordre de
 * chargement.
 *
 * Chargé sur le site et dans l'éditeur (enqueue_block_assets) pour que les
 * boutons s'affichent correctement dans les deux.
 */
.puqc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	border: none;
	border-radius: var(--wp--custom--border-radius--xlarge, 35px);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s, 16px);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--s, 24px);
	text-decoration: none;
	cursor: pointer;
	transition: var(--wp--custom--transition--ease-in-out, all 0.3s ease-in-out);
}

.puqc-btn:focus-visible {
	outline: none;
	/* Double anneau : visible sur fond clair comme sur fond foncé. */
	box-shadow: 0 0 0 2px var(--gs-colorpure-white, #ffffff), 0 0 0 4px var(--gs-colorocean-teal, #11606b);
}

/* Principal */
.puqc-btn.puqc-btn-primary {
	padding: 13px 30px;
	background-color: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorcloud-white, #fafcfc);
}

.puqc-btn.puqc-btn-primary:hover,
.puqc-btn.puqc-btn-primary:focus-visible {
	background-color: var(--gs-colormuted-teal, #54808a);
	color: var(--gs-colorpure-white, #ffffff);
}

/* Secondaire */
.puqc-btn.puqc-btn-secondary {
	padding: 11px 26px;
	background-color: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colorocean-teal, #11606b);
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
}

.puqc-btn.puqc-btn-secondary:hover,
.puqc-btn.puqc-btn-secondary:focus-visible {
	background-color: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorcloud-white, #fafcfc);
	border-color: var(--gs-colorocean-teal, #11606b);
}

/*
 * Bouton « Ajouter au panier » des pages produit : WooCommerce ne permet pas
 * d'y ajouter nos classes, et ses règles (WooCommerce, thème) sont plus
 * spécifiques que .puqc-btn. On lui applique donc le bouton principal avec
 * un sélecteur assez spécifique pour l'emporter, en neutralisant l'effet de
 * survol du thème (agrandissement, ombre, transparence).
 */
.woocommerce div.product form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	box-sizing: border-box;
	margin: 0;
	padding: 13px 30px;
	border: none;
	border-radius: var(--wp--custom--border-radius--xlarge, 35px);
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorcloud-white, #fafcfc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s, 16px);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--s, 24px);
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: var(--wp--custom--transition--ease-in-out, all 0.3s ease-in-out);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	background: var(--gs-colormuted-teal, #54808a);
	color: var(--gs-colorpure-white, #ffffff);
	transform: none;
	opacity: 1;
	box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--gs-colorpure-white, #ffffff), 0 0 0 4px var(--gs-colorocean-teal, #11606b);
}

/*
 * Boutons d'action des blocs Panier et Commande (« Passer à la validation
 * de commande », « Passer la commande ») : même traitement que ci-dessus,
 * en bouton principal pleine largeur.
 */
body .wc-block-components-button.wc-block-cart__submit-button,
body .wc-block-components-button.wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	padding: 13px 30px;
	border: none;
	border-radius: var(--wp--custom--border-radius--xlarge, 35px);
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorcloud-white, #fafcfc);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s, 16px);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--s, 24px);
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: var(--wp--custom--transition--ease-in-out, all 0.3s ease-in-out);
}

body .wc-block-components-button.wc-block-cart__submit-button:hover,
body .wc-block-components-button.wc-block-cart__submit-button:focus-visible,
body .wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
body .wc-block-components-button.wc-block-components-checkout-place-order-button:focus-visible {
	background: var(--gs-colormuted-teal, #54808a);
	color: var(--gs-colorpure-white, #ffffff);
	transform: none;
	opacity: 1;
	box-shadow: none;
}

body .wc-block-components-button.wc-block-cart__submit-button:focus-visible,
body .wc-block-components-button.wc-block-components-checkout-place-order-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--gs-colorpure-white, #ffffff), 0 0 0 4px var(--gs-colorocean-teal, #11606b);
}

/*
 * Factures PDF (outil « Factures PDF » de la Boîte à outils DGS) : bouton
 * « Facture » de la liste des commandes (Mon compte > Commandes, classe
 * « dgs-invoice » posée par WooCommerce à côté du « Voir » principal) et
 * lien de téléchargement sous le détail d'une commande. Ni l'un ni l'autre
 * ne prend nos classes : on leur applique le bouton secondaire avec un
 * sélecteur plus spécifique que ceux du thème.
 */
.woocommerce table.woocommerce-orders-table a.woocommerce-button.button.dgs-invoice,
.woocommerce .dgs-invoice-link a.woocommerce-button.button {
	margin-top: 8px;
	background: var(--gs-colorpure-white, #ffffff);
	color: var(--gs-colorocean-teal, #11606b);
	border: 1px solid var(--gs-colorsoft-aqua, #8bafb5);
	box-shadow: none;
}

.woocommerce table.woocommerce-orders-table a.woocommerce-button.button.dgs-invoice:hover,
.woocommerce table.woocommerce-orders-table a.woocommerce-button.button.dgs-invoice:focus-visible,
.woocommerce .dgs-invoice-link a.woocommerce-button.button:hover,
.woocommerce .dgs-invoice-link a.woocommerce-button.button:focus-visible {
	background: var(--gs-colorocean-teal, #11606b);
	color: var(--gs-colorcloud-white, #fafcfc);
	border-color: var(--gs-colorocean-teal, #11606b);
	transform: none;
	opacity: 1;
}

.dgs-invoice-link {
	margin: 1.5em 0;
}