/*
 * Quote & Catalog for WooCommerce — frontend styles.
 *
 * Modern, theme-agnostic design. Every color derives from two CSS variables
 * that a theme (or the Pro design settings) can override:
 *   --wqc-accent        main action color
 *   --wqc-accent-hover  hover state
 */

:root {
	/* The shop's own colour, wherever the theme keeps it.
	 *
	 * Read in order: Elementor's global primary, then the block-theme palette
	 * (primary, then accent, then the theme's own base), and only then our
	 * blue. A quote form that stays blue on a rose shop reads as a bolted-on
	 * plugin — inheriting one button and nothing else was a half promise.
	 *
	 * An explicit colour set in the plugin settings still wins: it is printed
	 * inline on the page and overrides this line. */
	/* Les thèmes populaires ne rangent pas leur couleur de marque dans la
	   palette de blocs : chacun a sa variable. Sans elles, la promesse
	   « le formulaire prend les couleurs de votre thème » était fausse sur
	   Blocksy, Kadence, Astra, Neve et GeneratePress — c'est-à-dire sur une
	   bonne part des boutiques WooCommerce. On les lit dans l'ordre, et on
	   retombe sur notre bleu seulement si aucune ne répond. */
	--wqc-accent: var(
		--wp--preset--color--primary,
		var( --wp--preset--color--accent,
		var( --theme-palette-color-1,
		var( --global-palette1,
		var( --ast-global-color-0,
		var( --nv-primary-accent,
		var( --accent, #2563eb ) ) ) ) ) )
	);
	/* Darkened from whatever the accent turned out to be, rather than a second
	 * hard-coded colour that would drift away from it. */
	--wqc-accent-hover: color-mix( in srgb, var( --wqc-accent ) 82%, black );
	/* Noir ou blanc selon la clarte de l accent, calcule une seule fois.
	 * Passer par une variable plutot que par une regle dediee : la couleur
	 * du texte est imposee par plusieurs regles de specificites differentes,
	 * et une regle de plus aurait encore perdu contre la plus specifique. */
	--wqc-on-accent: #fff;
	--wqc-on-accent: oklch( from var( --wqc-accent ) clamp( 0, ( 0.62 - l ) * 1000, 1 ) 0 0 );
	/* La couleur de la boutique, telle quelle.
	 *
	 * Elle a ete assombrie un temps pour le contraste : sur un pastel, baisser
	 * la clarte en gardant la saturation donne un marron — un rose pale mesure
	 * a #EFA8A4 ressortait en #7e413f. Une commercante ne reconnait plus sa
	 * marque, et une extension qui promet d heriter du theme puis repeint tout
	 * en marron a menti. La lisibilite d une teinte pastel reste a la main de
	 * la boutique, via la couleur explicite des reglages. */
	--wqc-accent-text: var( --wqc-accent );
	--wqc-ink: #111827;
	--wqc-muted: #6b7280;
	--wqc-line: #e5e7eb;
	--wqc-bg-soft: #f9fafb;
	--wqc-radius: 12px;
	--wqc-btn-radius: 999px; /* Corner radius of our buttons (Pro setting). */
	--wqc-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 14px rgba(17, 24, 39, 0.06);
}

/* Elementor keeps its palette on the body, not on :root — a variable
 * declared above it cannot see those values. Re-declared here so an
 * Elementor shop paints the form in its own colour; falls back to the
 * block palette, then to our blue. */
body {
	--wqc-accent: var(
		--e-global-color-primary,
		var( --wp--preset--color--primary,
		var( --wp--preset--color--accent,
		var( --theme-palette-color-1,
		var( --global-palette1,
		var( --ast-global-color-0,
		var( --nv-primary-accent,
		var( --accent, #2563eb ) ) ) ) ) ) )
	);
	--wqc-accent-hover: color-mix( in srgb, var( --wqc-accent ) 82%, black );
	/* Noir ou blanc selon la clarte de l accent, calcule une seule fois.
	 * Passer par une variable plutot que par une regle dediee : la couleur
	 * du texte est imposee par plusieurs regles de specificites differentes,
	 * et une regle de plus aurait encore perdu contre la plus specifique. */
	--wqc-on-accent: #fff;
	--wqc-on-accent: oklch( from var( --wqc-accent ) clamp( 0, ( 0.62 - l ) * 1000, 1 ) 0 0 );
	/* La couleur de la boutique, telle quelle.
	 *
	 * Elle a ete assombrie un temps pour le contraste : sur un pastel, baisser
	 * la clarte en gardant la saturation donne un marron — un rose pale mesure
	 * a #EFA8A4 ressortait en #7e413f. Une commercante ne reconnait plus sa
	 * marque, et une extension qui promet d heriter du theme puis repeint tout
	 * en marron a menti. La lisibilite d une teinte pastel reste a la main de
	 * la boutique, via la couleur explicite des reglages. */
	--wqc-accent-text: var( --wqc-accent );
}


/* =========================================================
   Buttons (product pages + quote page)
   ========================================================= */

/* Deux familles, deux régimes.
 *
 *  .wqc-btn            — les boutons des écrans du plugin (page de devis,
 *                        page de réponse). Ils nous appartiennent, on les peint
 *                        toujours.
 *  .wqc-quote-btn      — le bouton posé DANS la boutique, à côté de ceux du
 *                        thème. On ne le peint que si la marchande a choisi
 *                        « Utiliser le design de l'extension », ce que la classe
 *                        `wqc-buttons-plugin` sur le body signale.
 *
 * Sans cette distinction, « S'accorder à mon thème » ne faisait rien : le
 * plugin repeignait le bouton de toute façon, et la boutique se retrouvait avec
 * un bouton de devis d'une couleur étrangère au reste de ses boutons.
 */
.wqc-btn,
body.wqc-buttons-plugin .wqc-quote-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.72em 1.5em;
	/* Un thème dont la taille de police est plus petite ramenait ces boutons à
	   38-42px. Le plancher les garde confortables partout. */
	min-height: 44px;
	border: 0;
	border-radius: var(--wqc-btn-radius);
	background: var(--wqc-accent);
	color: var( --wqc-on-accent ) !important;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1);
}


.wqc-btn:hover,
body.wqc-buttons-plugin .wqc-quote-btn:hover {
	background: var(--wqc-accent-hover);
	color: var( --wqc-on-accent ) !important;
	transform: translateY(-1px);
	/* Tinted from the accent, not a leftover blue. */
	box-shadow: 0 4px 12px color-mix( in srgb, var( --wqc-accent ) 35%, transparent );
}

.wqc-btn:focus-visible,
body.wqc-buttons-plugin .wqc-quote-btn:focus-visible {
	outline: 2px solid var(--wqc-accent);
	outline-offset: 2px;
}

.wqc-btn-ghost {
	background: transparent;
	color: var(--wqc-accent-text) !important;
	border: 1.5px solid var(--wqc-accent-text);
	box-shadow: none;
}

.wqc-btn-ghost:hover {
	background: var(--wqc-accent);
	color: var( --wqc-on-accent ) !important;
}

.wqc-single-button {
	margin: 1.2em 0;
}

.wqc-price-placeholder {
	font-style: italic;
	opacity: 0.8;
}

/* =========================================================
   Quote page layout
   ========================================================= */

/* Classe doublee plutot que !important : Astra impose sa largeur de contenu
 * via .entry-content[data-ast-blocks-layout] > *, plus specifique que la
 * notre. Le formulaire s etalait sur 1200 px, ou une ligne de saisie
 * devient penible a lire. Doubler la classe suffit a repasser devant sans
 * verrouiller la regle pour les themes qui voudraient l ajuster. */
.wqc-quote-page.wqc-quote-page {
	max-width: 760px;
	margin: 0 auto;
	color: var(--wqc-ink);
}

.wqc-heading {
	font-size: 1.15em;
	font-weight: 700;
	margin: 1.6em 0 0.7em;
}

.wqc-card {
	background: #fff;
	border: 1px solid var(--wqc-line);
	border-radius: var(--wqc-radius);
	box-shadow: var(--wqc-shadow);
	overflow: hidden;
}

/* ---- Items table ---- */

.wqc-quote-page table.wqc-items {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
}

.wqc-quote-page table.wqc-items th {
	background: var(--wqc-bg-soft);
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wqc-muted);
	padding: 0.85em 1.1em;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--wqc-line);
}

.wqc-quote-page table.wqc-items td {
	padding: 0.9em 1.1em;
	border: 0;
	border-bottom: 1px solid var(--wqc-line);
	vertical-align: middle;
	background: transparent;
}

.wqc-quote-page table.wqc-items tbody tr:last-child td {
	border-bottom: 0;
}

.wqc-col-product a {
	font-weight: 600;
	text-decoration: none;
	color: var(--wqc-ink);
}

.wqc-variant {
	display: block;
	font-size: 0.82em;
	color: var(--wqc-muted);
	margin-top: 2px;
}

.wqc-variation-button {
	margin-top: 0.8em;
}

.wqc-col-product a:hover {
	color: var(--wqc-accent-text);
}

.wqc-col-qty {
	width: 140px;
}

.wqc-col-remove {
	width: 44px;
	text-align: right;
}

/* ---- Quantity stepper ---- */

.wqc-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--wqc-line);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

/* The +/- buttons are type="button" and do nothing without JavaScript, so they
   only appear once JavaScript has run. Without it the field keeps the
   browser's own spinners (see below) and stays usable. Two dead controls
   flanking a working field read as a broken page. */
.wqc-stepper .wqc-step {
	display: none;
	width: 34px;
	/* 44px is the smallest comfortable touch target; measured at 43 on a real
	   page, which is the kind of miss nobody sees and everybody feels. */
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--wqc-muted);
	font-size: 1.05em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
	padding: 0;
	line-height: 1;
}

.wqc-js .wqc-stepper .wqc-step {
	display: block;
}

.wqc-stepper .wqc-step:hover {
	background: var(--wqc-accent);
	color: #fff;
}

.wqc-stepper input.wqc-qty {
	width: 3em;
	min-height: 44px;
	border: 0;
	text-align: center;
	font-weight: 600;
	font-size: 0.95em;
	padding: 0.45em 0;
	background: transparent;
	color: var(--wqc-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Only once JavaScript has replaced them. Removing the browser's own spinners
   unconditionally left a visitor without JavaScript no way to step the
   quantity at all: our +/- do nothing, and the native arrows were gone. */
.wqc-js .wqc-stepper input.wqc-qty::-webkit-outer-spin-button,
.wqc-js .wqc-stepper input.wqc-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wqc-stepper input.wqc-qty:focus {
	outline: none;
}

/* ---- Remove link ---- */

.wqc-quote-page a.wqc-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--wqc-muted);
	transition: background 0.12s ease, color 0.12s ease;
	text-decoration: none;
}

.wqc-quote-page a.wqc-remove:hover {
	background: #fee2e2;
	color: #b91c1c;
}

/* ---- Update button: fallback only (hidden when JS runs) ---- */

.wqc-update-btn {
	margin-top: 0.9em;
}

/* Needs the weight: the rule that shields our buttons from themes carries
   "!important" and a heavier selector, so this one lost and the fallback
   button showed for everybody — a manual step the page does not need once
   JavaScript updates the quantities on its own. */
.wqc-quote-page.wqc-js .wqc-update-btn {
	display: none !important;
}

/* =========================================================
   Contact form
   ========================================================= */

.wqc-contact-form {
	padding: 1.4em 1.5em 1.6em;
}

.wqc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.2em;
}

.wqc-field {
	margin: 0 0 1.1em;
}

.wqc-field label {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 600;
	font-size: 0.88em;
}

.wqc-field .required {
	color: #dc2626;
}

.wqc-contact-form input[type="text"],
.wqc-contact-form input[type="email"],
.wqc-contact-form input[type="tel"],
.wqc-contact-form input[type="number"],
.wqc-contact-form input[type="date"],
.wqc-contact-form input[type="file"],
.wqc-contact-form select,
.wqc-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65em 0.9em;
	border: 1.5px solid var(--wqc-line);
	border-radius: 10px;
	background: #fff;
	color: var(--wqc-ink);
	font-size: 0.95em;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wqc-contact-form input[type="file"] {
	padding: 0.5em 0.9em;
	cursor: pointer;
}

/* Le halo de focus reprend la couleur du bouton (il était figé en bleu), et
   l'`outline` noir des thèmes est neutralisé — sans nuire à l'accessibilité,
   puisque le halo coloré fait office d'indicateur visible. */
.wqc-quote-page .wqc-contact-form input:focus,
.wqc-quote-page .wqc-contact-form select:focus,
.wqc-quote-page .wqc-contact-form textarea:focus {
	outline: 2px solid transparent !important;
	outline-offset: 0 !important;
	border-color: var(--wqc-accent) !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wqc-accent) 22%, transparent) !important;
}

/* ---- Retour boutique ---- */
.wqc-quote-page .wqc-back {
	margin: 0 0 0.6em;
	font-size: 0.9em;
}

.wqc-quote-page .wqc-back a {
	color: var(--wqc-muted);
	text-decoration: none;
}

.wqc-quote-page .wqc-back a:hover {
	color: var(--wqc-accent-text);
}

/* ---- Champ en erreur ---- */
.wqc-quote-page .wqc-field-invalid input,
.wqc-quote-page .wqc-field-invalid select,
.wqc-quote-page .wqc-field-invalid textarea {
	border-color: #dc2626 !important;
}

.wqc-quote-page .wqc-field-error {
	display: block;
	margin-top: 0.4em;
	font-size: 0.85em;
	font-weight: 600;
	color: #dc2626;
}

/* Why a submission was refused, said at the top of the page rather than left
   to the WooCommerce session — see templates/quote-page.php. Deliberately not
   in the brand colour: this one is a warning, not decoration. */
.wqc-quote-page .wqc-form-error {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-left: 4px solid #dc2626;
	border-radius: 0 6px 6px 0;
	background: #fef2f2;
	color: #7f1d1d;
	font-weight: 600;
}

/* ---- Custom fields (Pro) ---- */
.wqc-field-help {
	display: block;
	margin-top: 0.35em;
	font-size: 0.82em;
	color: var(--wqc-muted, #6b7280);
}

.wqc-field-checkbox label,
.wqc-radio {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 500;
	font-size: 0.92em;
	line-height: 1.4;
	cursor: pointer;
}

.wqc-field-checkbox input,
.wqc-radio input {
	margin-top: 0.15em;
	accent-color: var(--wqc-accent);
	flex: 0 0 auto;
}

.wqc-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	padding-top: 0.2em;
}

.wqc-field-heading {
	margin: 0.6em 0 0.2em;
	font-size: 1.02em;
}

.wqc-field-paragraph {
	margin: 0 0 1em;
	color: var(--wqc-muted, #4b5563);
	font-size: 0.92em;
}

.wqc-submit-btn {
	width: 100%;
	margin-top: 0.4em;
	padding: 0.85em 1.5em;
	font-size: 1em;
}

/* Honeypot: visually removed, still present for bots. */
.wqc-quote-page .wqc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================
   Success + notices
   ========================================================= */

.wqc-success {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	padding: 1.3em 1.5em;
	border: 1px solid #bbf7d0;
	background: #f0fdf4;
	border-radius: var(--wqc-radius);
	color: #14532d;
}

.wqc-success-icon {
	color: #16a34a;
	flex: none;
	margin-top: 2px;
}

.wqc-success h3 {
	margin: 0 0 0.35em;
	font-size: 1.1em;
	color: #14532d;
}

.wqc-success p {
	margin: 0;
}

.wqc-quote-page .woocommerce-message,
.wqc-quote-page .woocommerce-info {
	border-radius: 10px;
	border: 1px solid var(--wqc-line);
	border-left: 4px solid var(--wqc-accent);
	background: var(--wqc-bg-soft);
	padding: 0.9em 1.2em;
	margin-bottom: 1.2em;
	list-style: none;
}

.wqc-quote-page .woocommerce-error {
	border-radius: 10px;
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	background: #fef2f2;
	padding: 0.9em 1.2em;
	margin-bottom: 1.2em;
	list-style: none;
}

/* =========================================================
   AJAX states: toast, loading, row removal, empty state
   ========================================================= */

.wqc-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(12px);
	background: #111827;
	color: #fff;
	font-size: 0.9em;
	font-weight: 600;
	padding: 0.65em 1.3em;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(17, 24, 39, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 9999;
}

.wqc-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.wqc-toast-error {
	background: #b91c1c;
}

.wqc-btn.is-loading {
	opacity: 0.75;
	cursor: wait;
	position: relative;
}

.wqc-btn.is-loading::after {
	content: "";
	width: 1em;
	height: 1em;
	margin-left: 0.6em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wqc-spin 0.7s linear infinite;
}

@keyframes wqc-spin {
	to { transform: rotate(360deg); }
}

.wqc-quote-page tr.wqc-removing {
	opacity: 0;
	transform: translateX(10px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wqc-empty {
	padding: 2em 1.6em;
	text-align: center;
}

.wqc-empty p {
	margin: 0 0 1em;
	color: var(--wqc-muted);
}

.wqc-empty p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 560px) {
	.wqc-grid {
		grid-template-columns: 1fr;
	}

	.wqc-quote-page table.wqc-items thead {
		display: none;
	}

	.wqc-quote-page table.wqc-items,
	.wqc-quote-page table.wqc-items tbody,
	.wqc-quote-page table.wqc-items tr,
	.wqc-quote-page table.wqc-items td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.wqc-quote-page table.wqc-items tr {
		position: relative;
		border-bottom: 1px solid var(--wqc-line);
		padding: 0.5em 0;
	}

	.wqc-quote-page table.wqc-items tr:last-child {
		border-bottom: 0;
	}

	.wqc-quote-page table.wqc-items td {
		border: 0;
		padding: 0.35em 1.1em;
	}

	.wqc-col-remove {
		position: absolute;
		top: 0.7em;
		right: 0.4em;
		width: auto;
	}

	/* Le bouton de retrait flotte au-dessus de la ligne. Sans place reservee,
	   un nom de produit un peu long passait dessous : illisible, et un doigt
	   qui visait le nom supprimait la ligne. Mesure a 375px sur un nom
	   d artisane, le cas le plus courant chez les boutiques sur mesure.
	   Le plancher en pixels est indispensable : le bouton fait 32px quoi qu il
	   arrive, alors qu une reserve en em retrecit avec la police du theme —
	   sur Hello Elementor (14,4px) le texte repassait dessous. */
	.wqc-quote-page table.wqc-items td.wqc-col-product {
		padding-right: max( 3.2em, 56px );
	}
}

@media (prefers-reduced-motion: reduce) {
	.wqc-quote-btn,
	.wqc-btn,
	.wqc-stepper .wqc-step,
	.wqc-toast,
	.wqc-quote-page tr.wqc-removing {
		transition: none;
	}

	.wqc-quote-btn:hover,
	.wqc-btn:hover {
		transform: none;
	}

	.wqc-btn.is-loading::after {
		animation: none;
	}
}

/* =========================================================
   v0.10.0 — user-feedback fixes
   ========================================================= */

/* Shop grids: center the quote button under each product. */
.wqc-block-button {
	text-align: center;
	margin-top: 0.6em;
}

/* Le placement du bouton dans la grille n'appartient pas a l'extension, meme
   quand la boutique nous confie le design : on peint le bouton (couleur, forme,
   taille), le theme le place. Les cartes produit sont des colonnes flex dont
   tous les enfants — titre, prix, bouton — suivent le meme reglage d'alignement
   du theme ; centrer le texte de la carte centre donc le bouton avec le reste,
   sans que nous ayons a nous en meler.

   Deux blocs « margin-left/right: auto » vivaient ici et plus bas. Ils etaient
   morts depuis longtemps : le « display: inline-flex !important » du bloc de
   peinture les ecrasait, et des marges auto ne centrent rien sur une boite de
   niveau ligne. S'ils avaient gagne, ils auraient centre le bouton d'une
   boutique alignee a gauche — exactement ce que « s'accorder au theme » promet
   de ne pas faire. */

/* Neutralize theme/Woo icons overlapping the notice text. */
.wqc-quote-page .woocommerce-error li,
.wqc-quote-page .woocommerce-message li,
.wqc-quote-page .woocommerce-info li {
	list-style: none;
	margin: 0;
	padding: 0;
	position: static;
}

.wqc-quote-page .woocommerce-error li::before,
.wqc-quote-page .woocommerce-error::before,
.wqc-quote-page .woocommerce-message::before,
.wqc-quote-page .woocommerce-message li::before,
.wqc-quote-page .woocommerce-info::before {
	display: none !important;
	content: none !important;
}

/* Le second bloc de centrage force vivait ici (v0.11.0). Retire avec l'autre :
   voir la note plus haut. Le theme place, nous peignons. */

/* =========================================================
   My account — quotes tab
   ========================================================= */

.wqc-account-table { width: 100%; border-collapse: collapse; }
.wqc-account-table th,
.wqc-account-table td { padding: 0.8em 0.9em; border-bottom: 1px solid var(--wqc-line); vertical-align: middle; }
.wqc-account-table th {
	font-size: 0.78em; text-transform: uppercase; letter-spacing: .05em;
	color: var(--wqc-muted); text-align: left;
}
.wqc-account-badge {
	display: inline-block; color: #fff; font-size: 0.78em; font-weight: 600;
	border-radius: 12px; padding: 2px 10px; white-space: nowrap;
}
.wqc-account-actions { text-align: right; white-space: nowrap; }
.wqc-account-actions .wqc-btn { padding: 0.45em 1.1em; font-size: 0.85em; }
.wqc-account-empty { padding: 1.5em 0; }

/* Accept / decline a priced quote */
.wqc-decision { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; }
.wqc-decision > .wqc-btn { width: 100%; text-align: center; }
.wqc-decline { text-align: center; }
.wqc-decline > summary {
	cursor: pointer; font-size: 0.82em; color: var(--wqc-muted, #6b7280);
	padding: 5px; list-style: none; user-select: none;
}
.wqc-decline > summary::-webkit-details-marker { display: none; }
.wqc-decline > summary:hover { color: var(--wqc-ink, #111827); text-decoration: underline; }
.wqc-decline[open] > summary { margin-bottom: 6px; }
.wqc-decline textarea {
	width: 100%; box-sizing: border-box; border: 1.5px solid var(--wqc-line);
	border-radius: 8px; padding: 6px 9px; font-size: 0.85em; margin-bottom: 6px;
	resize: vertical; font-family: inherit;
}

/* =========================================================
   Priorité sur les styles de thème
   =========================================================
   Les thèmes stylent `.button` avec des sélecteurs plus spécifiques que les
   nôtres (`.woocommerce a.button` = 0,2,1 contre `.wqc-btn` = 0,1,0) : nos
   boutons héritaient donc du thème, coins carrés compris.

   Choix retenu : sur NOS pages (devis, compte client), le design du plugin
   s'impose toujours — y compris face à WooCommerce et aux widgets Elementor,
   qui sont les plus spécifiques du marché.

   Le bouton posé dans la boutique, lui, est laissé au thème par défaut : il
   porte la classe `button` et se fond donc naturellement dans les autres
   boutons du magasin. Le réglage « Design des boutons » → « Design du plugin »
   ajoute `wqc-buttons-plugin` sur le <body> et lui applique alors nos règles.

   Ces `!important` ne visent QUE nos propres classes, jamais un élément de
   WooCommerce ou du thème. La couleur reste pilotée par `--wqc-accent`, donc le
   réglage du marchand continue de commander. */

body.wqc-buttons-plugin a.wqc-quote-btn,
body.wqc-buttons-plugin button.wqc-quote-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	border: 0 !important;
	border-radius: var(--wqc-btn-radius) !important;
	padding: 0.72em 1.5em !important;
	background: var(--wqc-accent) !important;
	background-image: none !important;
	color: var( --wqc-on-accent ) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1) !important;
}

body.wqc-buttons-plugin a.wqc-quote-btn:hover,
body.wqc-buttons-plugin button.wqc-quote-btn:hover {
	background: var(--wqc-accent-hover) !important;
	color: var( --wqc-on-accent ) !important;
}

.wqc-quote-page a.wqc-btn,
.wqc-quote-page button.wqc-btn,
.wqc-account-table a.wqc-btn,
.wqc-account-table button.wqc-btn,
.wqc-account-empty a.wqc-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: var(--wqc-btn-radius) !important;
	padding: 0.72em 1.5em !important;
	background: var(--wqc-accent) !important;
	color: var( --wqc-on-accent ) !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	width: auto;
}

.wqc-quote-page a.wqc-btn:hover,
.wqc-quote-page button.wqc-btn:hover,
.wqc-account-table a.wqc-btn:hover,
.wqc-account-table button.wqc-btn:hover {
	background: var(--wqc-accent-hover) !important;
	color: var( --wqc-on-accent ) !important;
}

/* La variante fantôme reste transparente, cerclée de la couleur d'accent. */
.wqc-quote-page a.wqc-btn-ghost,
.wqc-quote-page button.wqc-btn-ghost,
.wqc-account-table a.wqc-btn-ghost,
.wqc-account-table button.wqc-btn-ghost {
	background: transparent !important;
	color: var(--wqc-accent-text) !important;
	border: 1.5px solid var(--wqc-accent-text) !important;
}

/* Le bouton d'envoi occupe toute la largeur du formulaire. */
.wqc-quote-page button.wqc-submit-btn {
	width: 100%;
	padding: 0.85em 1.5em !important;
}

/* Widget anti-spam Cloudflare Turnstile. */
.wqc-turnstile {
	margin: 0 0 1.25em;
}

/* Page de confirmation : le message fait quatre lignes la ou le formulaire en
   faisait un ecran. Sans plancher, le pied de page d'un theme sans footer
   collant remonte se coller sous le message et la page semble cassee.
   45vh laisse le message au-dessus de la ligne de flottaison sans creuser de
   vide sur un grand ecran ; `min-height` n'ecrase jamais un contenu plus long. */
.wqc-quote-page.wqc-quote-done {
	min-height: 45vh;
}

/* Message « choisissez une option » sous le bouton de devis d'un produit
   variable. Meme grammaire que les erreurs de champ du formulaire. */
.wqc-variation-msg {
	margin: 0.6em 0 0;
	color: #b32d2e;
	font-size: 0.9em;
	font-weight: 600;
}