/**
 * vefmpro-frontend.css
 *
 * Styles du panier, des dons et du paiement — extrait de
 * vefm-frontend.css (VEFmusic gratuit) lors de la migration du système de
 * vente vers VEFmusic Pro. Même approche que le fichier d'origine : hérite
 * des variables CSS du thème actif, ne fixe que la mise en page et les
 * états d'interaction, jamais les couleurs de marque.
 */

/* Font size scale — IDENTICAL to the one in vefm-frontend.css (VEFmusic
   Free), shared variable names. Declared again here because this
   stylesheet loads independently (a Pro block can be alone on a page).
   Any change must be made in both files. See the Free stylesheet for how
   the fluid values are computed. */
:root {
	--vefm-font-size-small: clamp(.75rem, .69rem + .26vw, .9rem);
	--vefm-font-size-normal: clamp(.875rem, .79rem + .39vw, 1.1rem);
	--vefm-font-size-medium: clamp(1rem, .88rem + .52vw, 1.3rem);
	--vefm-font-size-large: clamp(1.2rem, 1.08rem + .52vw, 1.5rem);
	--vefm-font-size-x-large: clamp(1.6rem, 1.4rem + .87vw, 2.1rem);
	--vefm-font-size-xx-large: clamp(2rem, 1.61rem + 1.74vw, 3rem);
}

/**
 * les placeholders des champs Pro (adresse de
 * livraison, email sandbox...) doivent pouvoir passer à la ligne plutôt
 * que d'être tronqués. Scopé aux seuls champs VEFmusic (id/class préfixés
 * vefm-/vefmpro-) — jamais un sélecteur universel qui affecterait tous
 * les champs du site, thème et autres extensions compris.
 */
input[id^="vefm-"]::placeholder,
input[class*="vefm-"]::placeholder,
textarea[id^="vefm-"]::placeholder,
textarea[class*="vefm-"]::placeholder {
	white-space: wrap;
}

/* Point 1 suite — Divi 5 : voir le même
   commentaire dans vefm-frontend.css (Free) — le contrôle natif "Rayon
   de bordure" de Divi 5 a besoin d'un overflow:hidden sur le wrapper du
   module pour produire un effet visuel réel. Les 7 modules Pro. */
.et_pb_module.vefmpro_divi_donate,
.et_pb_module.vefmpro_divi_billetterie,
.et_pb_module.vefmpro_divi_account,
.et_pb_module.vefmpro_divi_printful_list,
.et_pb_module.vefmpro_divi_cart,
.et_pb_module.vefmpro_divi_preorder,
.et_pb_module.vefmpro_divi_merch_list {
	overflow: hidden;
}

/* Fonts (2.15.39) — same rules as VEFmusic Free (see vefm-frontend.css):
   theme fonts by default, the VEFmusic font on headings only when one is
   set (.vefm-has-font on <body>, added by VEFmusic Free). */
:is(.vefm-cart, .vefm-donate, .vefmpro-merch-list, .vefmpro-printful-list, .vefmpro-billetterie, .vefm-preorder, .vefm-account) :is(button, input, select, textarea) {
	font-family: inherit;
}

.vefm-has-font :is(.vefm-cart, .vefm-donate, .vefmpro-merch-list, .vefmpro-printful-list, .vefmpro-billetterie, .vefm-preorder, .vefm-account) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var( --vefm-font-family, inherit );
}

:is(.vefm-cart, .vefm-donate, .vefmpro-merch-list, .vefmpro-printful-list, .vefmpro-billetterie, .vefm-preorder, .vefm-account)[class*="-font-family"] :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
}

.vefm-cart,
.vefm-donate {
	font-family: var( --vefm-font-family, inherit );
	color: inherit;
}

/* Panier                                                            */
/* ---------------------------------------------------------------- */

/* Panier — pastille flex Divi : sans ce width:100%, l’enveloppe
   .vefmpro_divi_cart générée par Divi (flex-item, flex-grow:0) se
   réduit à la taille de son contenu plutôt que de remplir sa colonne,
   rendant le réglage « Max width » ci-dessous invisible en pratique
   (confirmé en direct 15/09/2026 — « le panier ne se met
   pas pleine largeur »). Gutenberg/Elementor n’ont pas ce piège
   (conteneur de bloc classique, pas un flex-item Divi) — correctif
   Divi uniquement, sans effet ailleurs. */
.vefmpro_divi_cart {
	width: 100%;
}

.vefm-cart {
	width: auto;
	/* 2.15.37: minimum width for narrow
	   containers, never wider than the container itself. */
	min-width: min(220px, 100%);
	/* 2.15.37: no fixed default any more — when the
	   "Max width" setting is left at 0, the cart takes the full width of
	   its container (previously capped at 480px). */
	max-width: var( --vefm-cart-max-width, none );
	padding: clamp(8px, 2vw, 24px);
	/* Point 1 : --vefm-block-radius (nouveau,
	   4 coins indépendants) prend le pas sur --vefm-cart-radius
	   (ancien réglage uniforme, INCHANGÉ, toujours actif si le nouveau
	   n'est pas utilisé) — jamais une régression du défaut 14px déjà
	   en production. */
	border-radius: var( --vefm-block-radius, var( --vefm-cart-radius, 14px ) );
	background: var( --vefm-cart-bg, var( --vefm-track-bg, rgba(0, 0, 0, 0.14) ) );
	color: var( --vefm-cart-text, inherit );
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.vefm-cart h3 {
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Couleur du titre du panier : même principe que
	   --vefm-merch-title-color et les autres cartes (2.14.0) —
	   vide/non réglé = héritage de --vefm-cart-text posé sur
	   .vefm-cart (voir plus haut), jamais une couleur figée par
	   défaut. */
	color: var( --vefm-cart-title-color, inherit );
}

.vefm-cart h3::before {
	content: '🛒';
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
}

.vefm-cart-lines {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.vefm-cart-line {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* 2.15.39: no wrapping any more — a long
	   title pushed the quantity, price and remove button onto a new line
	   in some rows only, breaking the alignment between rows. The title
	   now wraps inside its own column (.vefm-cart-line-main has
	   min-width: 0). */
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	/* Point 1 suite (10/09/2026) : aucun arrondi n'existait avant sur
	   cette ligne (juste un séparateur) — repli à 0, sans régression. */
	border-radius: var( --vefm-content-radius, 0 );
}

.vefm-cart-line:last-child {
	border-bottom: none;
}

.vefm-cart-line-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vefm-cart-line-title {
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-cart-line-note {
	font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
	opacity: 0.6;
	font-style: italic;
}

.vefm-cart-line-note.vefm-cart-line-stock-warning {
	color: #d63638; /* Same warning red as before, now a class so a theme can restyle it (was an inline style). */
}

.vefm-cart-line-price {
	flex: 1 0 auto;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.vefm-cart-remove {
	background: rgba(0, 0, 0, 0.06);
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	line-height: 1;
	color: inherit;
	flex: 0 0 auto;
}

.vefm-cart-remove:hover {
	background: rgba(0, 0, 0, 0.12);
}

.vefm-cart-empty {
	opacity: 0.65;
	font-style: italic;
	padding: 16px 0;
	text-align: center;
}

.vefm-cart-discount {
	text-align: right;
	opacity: 0.7;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	margin: 0 0 4px;
}

.vefm-cart-total {
	display: flex;
	justify-content: flex-end;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	border-top: 2px solid rgba(0, 0, 0, 0.15);
	padding-top: 12px;
	margin: 0;
}

.vefm-cart-promo-applied {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: right;
	opacity: 0.85;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	margin: 0 0 4px;
	color: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
}

.vefm-cart-promo-applied .vefm-cart-promo-remove {
	border: none;
	background: none;
	text-decoration: underline;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	padding: 0;
	color: inherit;
}

.vefm-cart-promo-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
	gap: 6px;
}

.vefm-cart-promo-input {
	flex: 1;
	min-width: 120px;
	padding: 6px 10px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vefm-cart-promo-apply {
	border-radius: 4px;
	padding: 6px 14px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-cart-promo-error {
	flex-basis: 100%;
	color: #d63638;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-cart-checkout {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.vefm-cart-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
	line-height: 1.5;
	opacity: 0.85;
}

.vefm-cart-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
}

#vefm-paypal-buttons {
	margin-bottom: 10px;
}

.vefm-stripe-checkout {
	display: block;
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
}

.vefm-cart-confirmation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	padding: 32px 16px;
	color: #1e7e34;
}

.vefm-cart-confirmation-icon {
	width: 48px;
	height: 48px;
	color: #1e7e34;
}

.vefm-cart-confirmation-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
	line-height: 1.4;
}

.vefm-view-cart-link {
	/* "View cart" link shown next to an add-to-cart button after an add. */
	margin-inline-start: 0.75em;
	font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
	white-space: nowrap;
	color: inherit;
	text-decoration: underline;
}

.vefm-return-notice {
	/* Shown at the top of a page that has no cart/pre-order panel when the
	   buyer comes back from Stripe (donation page, any other page). */
	box-sizing: border-box;
	max-width: min(100%, 40rem);
	margin: 1em auto;
	padding: 0.75em 1em;
	border: 1px solid currentColor;
	border-radius: 4px;
	text-align: center;
}

.vefm-return-notice.vefm-cart-confirmation {
	padding: 1em;
	gap: 0;
}

.vefm-cart-error {
	color: #dc3232;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

/* Paiement sandbox (mode Test uniquement) — délibérément distinct
   visuellement des vrais moyens de paiement (bordure en pointillés, ton
   ambre) pour qu'il n'y ait aucune ambiguïté sur sa nature. */

.vefm-cart-sandbox {
	margin-top: 14px;
	padding: 12px;
	border: 1px dashed #d4a72c;
	border-radius: 8px;
	background: rgba(212, 167, 44, 0.08);
}

.vefm-cart-sandbox-label {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #a3791f;
}

.vefm-sandbox-email {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	margin-bottom: 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.vefm-sandbox-checkout {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 10px;
	border: 1px dashed #a3791f;
	border-radius: 4px;
	background: transparent;
	color: #a3791f;
	font-family: var( --vefm-font-family, inherit );
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
}

.vefm-sandbox-checkout:hover {
	background: rgba(212, 167, 44, 0.12);
}

.vefm-sandbox-checkout:disabled {
	cursor: wait;
}

/* ---------------------------------------------------------------- */
/* Bloc Don                                                           */
/* ---------------------------------------------------------------- */

/* Même piège que .vefmpro_divi_cart plus haut — voir son commentaire. */
.vefmpro_divi_donate {
	width: 100%;
}

.vefm-donate {
	width: 100%;
	max-width: var( --vefm-donate-max-width, 400px );
	padding: 24px;
	/* Point 1 : même repli imbriqué que
	   .vefm-cart ci-dessus (--vefm-cart-radius partagé entre les deux
	   blocs de longue date) — défaut 14px inchangé. */
	border-radius: var( --vefm-block-radius, var( --vefm-cart-radius, 14px ) );
	background: var( --vefm-cart-bg, var( --vefm-track-bg, rgba(0, 0, 0, 0.14) ) );
	color: var( --vefm-cart-text, inherit );
	border: 1px solid rgba(0, 0, 0, 0.12);
	text-align: center;
}

.vefm-donate-intro {
	margin: 0 0 16px;
	opacity: 0.85;
}

.vefm-donate-amounts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}

.vefm-donate-amount {
	padding: 8px 18px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	/* Point 1 suite (10/09/2026) : 20px en dur remplacé par le nouveau
	   réglage 4 coins, repli à 20px si non réglé (défaut inchangé). */
	border-radius: var( --vefm-content-radius, 20px );
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-donate-amount:hover {
	background: rgba(0, 0, 0, 0.05);
}

.vefm-donate-amount.is-selected {
	background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
	color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
	border-color: transparent;
}

.vefm-donate-custom {
	margin-bottom: 16px;
}

.vefm-donate-custom-amount {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	text-align: center;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-donate-submit {
	display: block;
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
}

.vefm-donate-submit:disabled {
	cursor: not-allowed;
}

.vefm-donate-error {
	color: #dc3232;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	margin: 10px 0 0;
}

/* Panier — merch (quantité, port, livraison)                       */
/* ------------------------------------------------------------------ */

.vefm-cart-line-qty-controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

@media ( max-width: 480px ) {
	.vefm-cart-line-qty-controls {
		justify-content: center;
	}
}

.vefm-cart-qty-increase,
.vefm-cart-qty-decrease {
	width: 22px;
	height: 22px;
	line-height: 20px;
	padding: 0;
	border: 1px solid color-mix( in srgb, currentColor 25%, transparent );
	background: transparent;
	color: inherit;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-cart-line-qty {
	opacity: 0.85;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	min-width: 16px;
	text-align: center;
	display: inline-block;
}

.vefm-cart-physical-returns-notice {
	font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
	opacity: 0.75;
	margin: 10px 0;
}

.vefm-cart-shipping {
	text-align: right;
	opacity: 0.8;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	margin: 0 0 4px;
}

.vefm-cart-shipping-form {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vefm-cart-shipping-form legend {
	font-weight: 600;
	padding: 0 4px;
}

.vefm-cart-shipping-form input,
.vefm-cart-shipping-form select {
	padding: 6px 10px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vefm-cart-shipping-blocked {
	color: #d63638;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	margin: 0;
}

/* Même piège générique que .vefmpro_divi_cart (voir son commentaire,
   section Panier) — masqué ici tant que le contenu (grille de
   produits) est naturellement large, mais réel dès peu de produits ou
   1 seule colonne réglée. Corrigé par précaution, cohérence avec les
   autres modules Pro (vérification croisée 15/09/2026). */
.vefmpro_divi_merch_list {
	width: 100%;
}

/* Boutique (Merch)                                                  */
/* ------------------------------------------------------------------ */

.vefmpro-merch-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	font-family: var( --vefm-font-family, inherit );
	/* Point 1 : aucun réglage de ce type
	   n'existait avant sur ce bloc (le conteneur est une simple grille)
	   — repli à 0, sans régression. */
	border-radius: var( --vefm-block-radius, 0 );
}

/* nombre de colonnes réglable (0 = auto,
   comportement ci-dessus inchangé). --vefmpro-merch-max-columns
   plafonne la valeur choisie selon la largeur d'écran (CSS dynamique,
   min()) plutôt qu'une valeur figée par colonne. */
.vefmpro-merch-list--fixed-columns {
	--vefmpro-merch-max-columns: 6;
	grid-template-columns: repeat( min( var( --vefmpro-merch-columns, 3 ), var( --vefmpro-merch-max-columns ) ), minmax( 0, 1fr ) );
}

@media ( max-width: 780px ) {
	.vefmpro-merch-list--fixed-columns {
		--vefmpro-merch-max-columns: 2;
	}
}

@media ( max-width: 480px ) {
	.vefmpro-merch-list--fixed-columns {
		--vefmpro-merch-max-columns: 1;
	}
}

.vefmpro-merch-item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* Point 1 suite (10/09/2026) : 8px en dur remplacé, repli inchangé. */
	border-radius: var( --vefm-content-radius, 8px );
}

.vefmpro-merch-item-title {
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	/* v2.14.0 : jusqu'ici sans réglage dédié. */
	color: var( --vefm-merch-title-color, inherit );
}

.vefmpro-merch-item-desc {
	opacity: 0.8;
}

.vefmpro-merch-item-outofstock {
	opacity: 0.6;
	font-style: italic;
	margin: 0;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Shop cards — shop (Merch) AND print-on-demand (Printful), one layout */
/* ------------------------------------------------------------------ */
/* Both cards always have the same six slots, in the same order: image,
   title, description, options (variant selector or label), price,
   action (quantity + button, or "Out of stock"). Missing content leaves
   an empty slot, never a shifted one. With subgrid, each slot takes the
   height of the tallest card of its grid row, so titles, descriptions,
   prices and buttons line up from one card to the next. Browsers without
   subgrid fall back to a flex column (description grows, so price and
   button stay at the bottom). */
.vefmpro-card {
	display: flex;
	flex-direction: column;
	padding: clamp(8px, 2vw, 24px);
	/* The theme may justify text: ragged right reads better in a narrow card. */
	text-align: start;
}

.vefmpro-card-image img {
	display: block;
	width: 100%;
	height: auto;
	/* Same square frame for every product. contain = never crops a photo;
	   change to cover to fill the frame instead. */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 4px;
}

.vefmpro-card-title {
	margin: 10px 0 6px;
	overflow-wrap: anywhere;
}

/* A theme can justify every h3/p directly (an inherited start would lose):
   state it on the elements themselves. */
.vefmpro-card-title,
.vefmpro-card-desc,
.vefmpro-card-desc p,
.vefmpro-printful-item-variant-label {
	text-align: start;
}

.vefmpro-card-desc {
	flex-grow: 1;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefmpro-card-desc > :first-child {
	margin-top: 0;
}

.vefmpro-card-desc > :last-child {
	margin-bottom: 0;
}

.vefmpro-card-options {
	margin: 6px 0 0;
}

.vefmpro-printful-item-variant-label {
	margin: 0;
	padding: 7px 0;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.7;
}

.vefmpro-printful-variant-select,
.vefmpro-printful-size-select {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 6px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

/* Printful card: one picture per colour, then the size list. Selected = outline on every side (no one-sided accent). */
.vefmpro-pf-picker {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The choices fold behind one button (current colour and size); the script unhides the button.
   Without the script the button stays hidden and the panel stays open. */
.vefmpro-pf-toggle[hidden],
.vefmpro-pf-panel[hidden] {
	display: none !important;
}

.vefmpro-pf-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vefmpro-pf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vefmpro-printful-list .vefmpro-pf-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	line-height: 1.4;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	cursor: pointer;
	appearance: none;
}

.vefmpro-printful-list .vefmpro-pf-toggle:hover {
	border-color: currentColor;
}

.vefmpro-printful-list .vefmpro-pf-toggle:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.vefmpro-pf-toggle-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Chevron drawn with borders: points down when folded, up when open. */
.vefmpro-pf-toggle-icon {
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.25em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.vefmpro-pf-toggle[aria-expanded="true"] .vefmpro-pf-toggle-icon {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}

.vefmpro-pf-colors {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vefmpro-pf-legend {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefmpro-pf-color-name {
	margin-inline-start: 0.4em;
	opacity: 0.7;
}

.vefmpro-pf-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vefmpro-pf-swatch {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

/* The real radio stays in the page (keyboard, screen readers) but is invisible. */
.vefmpro-pf-swatch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vefmpro-pf-swatch img,
.vefmpro-pf-swatch-text {
	display: block;
	border-radius: 4px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	opacity: 0.8;
	transition: opacity 0.15s ease, outline-color 0.15s ease;
}

.vefmpro-pf-swatch img {
	width: clamp(40px, 6vw, 56px);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.vefmpro-pf-swatch-text {
	padding: 6px 10px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefmpro-pf-swatch:hover img,
.vefmpro-pf-swatch:hover .vefmpro-pf-swatch-text {
	opacity: 1;
}

.vefmpro-pf-swatch input:checked + img,
.vefmpro-pf-swatch input:checked + .vefmpro-pf-swatch-text {
	outline-color: currentColor;
	opacity: 1;
}

.vefmpro-pf-swatch input:focus-visible + img,
.vefmpro-pf-swatch input:focus-visible + .vefmpro-pf-swatch-text {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	opacity: 1;
}

.vefmpro-pf-size {
	display: block;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vefmpro-pf-swatch img,
	.vefmpro-pf-swatch-text,
	.vefmpro-pf-toggle-icon {
		transition: none;
	}
}

.vefmpro-card-price {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large, var(--vefm-font-size-large));
	margin: 10px 0;
	text-align: center;
}

.vefmpro-merch-item-add,
.vefmpro-printful-item-add {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-self: end;
	width: fit-content;
	margin: auto auto 0;
	gap: 8px;
}

.vefmpro-merch-qty,
.vefmpro-printful-qty {
	width: 60px;
	padding: 6px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	/* quantité alignée dans le sélecteur. */
	text-align: center;
}

.vefmpro-merch-item-add .vefm-add-to-cart,
.vefmpro-printful-item-add .vefm-add-to-cart {
	flex: 0 1 auto;
	border: none;
	background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
	color: var( --vefm-button-text-color, #fff );
	font-family: var( --vefm-font-family, inherit );
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 12px;
}

@supports ( grid-template-rows: subgrid ) {
	.vefmpro-card {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		/* The list's own gap separates the cards; none inside a card. */
		row-gap: 0;
	}

	.vefmpro-card-desc {
		flex-grow: initial;
	}

	.vefmpro-merch-item-add,
	.vefmpro-printful-item-add {
		margin: 0 auto;
	}
}

/* Même piège générique que .vefmpro_divi_cart — voir son commentaire. */
.vefmpro_divi_printful_list {
	width: 100%;
}

/* Boutique Printful (print-on-demand)                               */
/* ------------------------------------------------------------------ */

.vefmpro-printful-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	font-family: var( --vefm-font-family, inherit );
	/* Point 1 : aucun réglage de ce type
	   n'existait avant sur ce bloc (le conteneur est une simple grille)
	   — repli à 0, sans régression. */
	border-radius: var( --vefm-block-radius, 0 );
}

.vefmpro-printful-item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* Point 1 suite (10/09/2026) : --vefm-content-radius (nouveau, par
	   bloc) prend le pas sur --vefm-printful-radius (réglage GLOBAL
	   existant, VEFmusic > Pro — Style — gardé en repli, inchangé). */
	border-radius: var( --vefm-content-radius, var( --vefm-printful-radius, 8px ) );
	background: var( --vefm-printful-bg, transparent );
	color: var( --vefm-printful-text, inherit );
}

.vefmpro-printful-item-title {
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	/* v2.14.0 : jusqu'ici sans réglage dédié. */
	color: var( --vefm-printful-title-color, inherit );
}

.vefmpro-printful-item-desc {
	opacity: 0.8;
}

/* Même piège générique que .vefmpro_divi_cart — voir son commentaire. */
.vefmpro_divi_billetterie {
	width: 100%;
}

/* Billetterie interne (v0.6.0) — même structure visuelle que la Boutique
   ci-dessus (grille de cartes), classes distinctes pour rester
   indépendante si l'une des deux évolue plus tard. */
.vefmpro-billetterie {
	display: grid;
	/* 2.15.37: auto-fit instead of auto-fill — with
	   auto-fill, empty tracks were kept and a single show only took a
	   fraction of the width. min(220px, 100%) prevents an overflow in
	   containers narrower than 220px. */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 24px;
	font-family: var( --vefm-font-family, inherit );
	/* Point 1 : aucun réglage de ce type
	   n'existait avant sur ce bloc (le conteneur est une simple grille)
	   — repli à 0, sans régression. */
	border-radius: var( --vefm-block-radius, 0 );
}

.vefmpro-ticket-item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* Point 1 suite (10/09/2026) : 8px en dur remplacé, repli inchangé. */
	border-radius: var( --vefm-content-radius, 8px );
	padding: clamp(8px, 2vw, 24px);
	display: flex;
	flex-direction: column;
}

.vefmpro-ticket-item-title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	/* v2.14.0 : jusqu'ici sans réglage dédié. */
	color: var( --vefm-ticket-title-color, inherit );
}

.vefmpro-ticket-item-date,
.vefmpro-ticket-item-venue {
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	opacity: 0.8;
	margin: 2px 0;
}

.vefmpro-venue-map {
	display: block;
	/* 2.15.37: centered when smaller than its
	   container, with a minimum width that never exceeds the container
	   (min-width always wins over max-width). */
	min-width: min(220px, 100%);
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 10px auto;
}

.vefmpro-ticket-item-remaining {
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.7;
	margin: 0 0 10px;
}

/* v2.11 (chantier zones/sièges) : .vefmpro-ticket-item-price retirée —
   un concert pouvant désormais avoir plusieurs tarifs (un par zone,
   voir ci-dessous), un prix unique en tête de carte n'a plus de sens. */

.vefmpro-ticket-zones {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 10px;
}

.vefmpro-ticket-zone {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 12px;
}

.vefmpro-ticket-zone-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.vefmpro-ticket-zone-name {
	font-weight: 600;
}

.vefmpro-ticket-zone-price {
	font-weight: 600;
	opacity: 0.85;
	white-space: nowrap;
}

.vefmpro-seat-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 8px 0 12px;
	max-height: 160px;
	overflow-y: auto;
}

/* les numéros de siège n'ont pas tous la
   même longueur ("V.I.P. 1" / "V.I.P. 23" / "V.I.P. 123"...) — en
   flex-wrap, chaque ligne se "tasse" indépendamment selon ce qui
   précède, donc les cases à cocher ne s'alignent jamais en vraies
   colonnes. Réglage Layout "Seat columns" (voir editor-billetterie.js,
   même recette que --vefmpro-merch-columns) : grille à N colonnes,
   chaque colonne garde SA largeur (déterminée par son propre contenu)
   sur toute la hauteur — les cases s'alignent enfin verticalement,
   quelle que soit la longueur du libellé le plus long. 0 = auto
   (comportement flex-wrap ci-dessus inchangé). */
.vefmpro-billetterie--fixed-seat-columns .vefmpro-seat-picker {
	--vefmpro-seat-max-columns: 6;
	display: grid;
	grid-template-columns: repeat( min( var( --vefmpro-seat-columns, 3 ), var( --vefmpro-seat-max-columns ) ), max-content );
	/* 2.15.34: seat grid centered in its zone. */
	justify-content: center;
	flex-wrap: unset;
	column-gap: 20px;
}

@media ( max-width: 480px ) {
	.vefmpro-billetterie--fixed-seat-columns .vefmpro-seat-picker {
		--vefmpro-seat-max-columns: 2;
	}
}

.vefmpro-seat-option {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	cursor: pointer;
}

.vefmpro-seat-checkbox {
	cursor: pointer;
}

.vefmpro-ticket-zone .vefm-add-to-cart {
	display: flex;
	/* 2.18.21: centered at its content width on wide screens, full width
	   on small ones (media query below). 2.15.33: label centered and same
	   font size as the other add-to-cart buttons (see .vefmpro-ticket-item-add). */
	max-width: fit-content;
	margin: auto;
	justify-content: center;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	border: none;
	background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
	color: var( --vefm-button-text-color, #fff );
	font-family: var( --vefm-font-family, inherit );
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 12px;
}

@media ( max-width: 480px ) {
	.vefmpro-ticket-zone .vefm-add-to-cart {
		max-width: none;
		margin: 0;
	}
}

.vefmpro-ticket-reveal {
	/* v2.11.3 (bug réel trouvé en testant sur un thème à fond sombre,
	   07/09/2026) : bordure + texte forcés à la même couleur d'accent
	   (souvent sombre par défaut, #1e1e1e) sur fond transparent —
	   invisible dès que le fond de page lui-même est sombre (texte
	   sombre sur fond sombre). `currentColor`/`inherit` reprennent la
	   couleur de texte déjà correctement gérée par le thème à cet
	   endroit (le titre du concert juste au-dessus reste, lui, bien
	   lisible quel que soit le thème) — jamais une couleur d'accent
	   codée en dur pour un texte destiné à rester lisible sur fond
	   variable. */
	display: block;
	margin-top: 10px;
	/* 2.18.10: follows the button background color (Style > General > Button
	   colors) when one is set; the border follows the text color. Left empty,
	   it keeps the text color of the page, as before. */
	border: 1px solid currentColor;
	background: transparent;
	color: var( --vefm-button-bg, inherit );
	border-radius: 4px;
	padding: 8px 18px;
	font-family: var( --vefm-font-family, inherit );
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
}

.vefmpro-ticket-details {
	margin-top: 14px;
}

.vefmpro-ticket-item-add {
	display: inline-flex;
	gap: 8px;
	margin: auto;
}

.vefmpro-ticket-qty {
	width: 60px;
	padding: 6px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	text-align: center;
}

.vefmpro-ticket-item-add .vefm-add-to-cart {
	flex: 1;
	justify-content: center;
	background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
	color: var( --vefm-button-text-color, #fff );
	font-family: var( --vefm-font-family, inherit );
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	border: none;
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 12px;
}

@media ( max-width: 480px ) {
	.vefmpro-ticket-item-add {
		display: flex;
		margin: 0;
	}
}

.vefmpro-ticket-item-soldout {
	opacity: 0.6;
	font-style: italic;
}

/* Même piège générique que .vefmpro_divi_cart — voir son commentaire. */
.vefmpro_divi_preorder {
	width: 100%;
}

/* Précommande                                                       */
/* ------------------------------------------------------------------ */

.vefm-preorder {
	/* 2.15.37: same rule as the cart — setting left at 0 = full width of
	   the container (previously capped at 480px). */
	max-width: var( --vefm-preorder-max-width, none );
	/* Point 1 : même principe de repli
	   imbriqué que .vefm-cart/.vefm-donate — défaut 14px inchangé. */
	border-radius: var( --vefm-block-radius, var( --vefm-preorder-radius, 14px ) );
	background: var( --vefm-preorder-bg, var( --vefm-track-bg, rgba(0, 0, 0, 0.14) ) );
	color: var( --vefm-preorder-text, inherit );
	border: 1px solid rgba(0, 0, 0, 0.12);
	font-family: var( --vefm-font-family, inherit );
}

.vefm-preorder-content {
	padding: clamp(8px, 2vw, 24px);
}

.vefm-preorder-title {
	margin: 0 0 4px;
	/* v2.14.0 : jusqu'ici sans réglage dédié — hérite du
	   --vefm-preorder-text du conteneur par défaut. */
	color: var( --vefm-preorder-title-color, inherit );
}

.vefm-preorder-price {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	font-weight: 600;
}

.vefm-preorder-progress {
	height: 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.12);
	overflow: hidden;
	margin-bottom: 8px;
}

.vefm-preorder-progress-bar {
	height: 100%;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	border-radius: 999px;
	transition: width 0.3s ease;
}

.vefm-preorder-stats {
	margin: 0 0 2px;
	font-weight: 600;
	/* 2.15.36: centered under the progress bar. */
	text-align: center;
}

.vefm-preorder-meta {
	margin: 0 0 16px;
	opacity: 0.75;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	text-align: center;
}

.vefm-preorder-closed {
	padding: 12px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.06);
}

.vefm-preorder-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 16px 0;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-preorder-shipping-form {
	display: flex;
	flex-direction: column;
	/* 2.15.35: full width on phones, then 80% of
	   the block on tablets and 60% on desktops (media queries below),
	   instead of shrinking to its fields (fit-content). min-width:0
	   overrides the fieldset's default min-content minimum. */
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 16px auto;
	padding: 0;
	border: none;
	gap: 8px;
}

@media ( min-width: 481px ) {
	.vefm-preorder-shipping-form {
		width: 80%;
	}
}

@media ( min-width: 981px ) {
	.vefm-preorder-shipping-form {
		width: 60%;
	}
}

.vefm-preorder-shipping-form legend {
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
	margin-bottom: 4px;
	padding: 0;
}

.vefm-preorder-shipping-form input,
.vefm-preorder-shipping-form select {
	padding: 8px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vefm-preorder-physical-returns-notice {
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.75;
	margin: 8px 0 16px;
}

.vefm-preorder-stripe-checkout,
.vefm-preorder-sandbox-checkout {
	display: flex;
	border-radius: 4px;
	padding: 12px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	font-weight: 600;
	margin: 8px auto;
}

.vefm-preorder-sandbox {
	display: flex;
	flex-direction: column;
	width: fit-content;
	padding-top: 16px;
	margin: 16px auto;
	border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

.vefm-preorder-sandbox-label {
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	opacity: 0.7;
	margin-bottom: 6px;
}

.vefm-preorder-sandbox-email {
	width: auto;
	padding: 8px;
	margin-bottom: 8px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vefm-preorder-error {
	color: #b32d2e;
}
/* Mon compte (v1.0.13 — accès par lien magique par email)             */
/* ------------------------------------------------------------------ */

/* Même piège que .vefmpro_divi_cart plus haut — voir son commentaire. */
.vefmpro_divi_account {
	width: 100%;
}

.vefm-account {
	width: 100%;
	max-width: var( --vefm-account-max-width, 640px );
	font-family: var( --vefm-font-family, inherit );
	/* Point 1 : aucun réglage de ce type
	   n'existait avant sur ce bloc — repli à 0, sans régression. */
	border-radius: var( --vefm-block-radius, 0 );
}

.vefm-account-intro {
	margin: 0 0 16px;
	opacity: 0.85;
}

.vefm-account-request-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.vefm-account-request-form label {
	flex-basis: 100%;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
}

.vefm-account-request-form input[type="email"] {
	flex: 1 1 240px;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vefm-account-request-form .vefm-button {
	flex: 0 0 auto;
	border-radius: 6px;
	padding: 10px 18px;
	font-weight: 600;
}

.vefm-account-notice {
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.06);
	margin-bottom: 16px;
}

.vefm-account-signed-in {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	opacity: 0.8;
}

.vefm-account-orders {
	width: 100%;
	border-collapse: collapse;
}

.vefm-account-orders th,
.vefm-account-orders td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	vertical-align: top;
}

.vefm-account-orders .vefm-button-small {
	border-radius: 4px;
	padding: 6px 10px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-preorder-gallery {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.vefm-preorder-gallery-image {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
}

.vefm-preorder-description {
	margin-bottom: 12px;
	opacity: 0.9;
}

.vefm-preorder-description p {
	margin: 0 0 8px;
}

.vefm-preorder-products {
	margin-bottom: 12px;
}

/* 2.18.1: each product is a wrapping flex row. The label asks for a
   comfortable width; when the block is too narrow for label + price +
   quantity on one line (a phone), the label takes its own full line and
   the price and the quantity go underneath, side by side. */
.vefm-preorder-product-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 10px 6px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.vefm-preorder-product-label {
	flex: 1 1 15rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.vefm-preorder-product-buy {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-inline-start: auto;
}

.vefm-preorder-product-price {
	white-space: nowrap;
	opacity: 0.85;
}

.vefm-preorder-qty-input {
	width: 60px;
	padding: 6px;
	text-align: center;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.vefm-preorder-total {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large, var(--vefm-font-size-large));
	margin: 0 0 16px;
	text-align: right;
}

.vefm-preorder-info-notice {
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.75;
	margin: 12px 0 16px;
}

.vefm-preorder-tiers {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vefm-preorder-tier {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	/* Point 1 suite (10/09/2026) : 6px en dur remplacé, repli inchangé. */
	border-radius: var( --vefm-content-radius, 6px );
	background: rgba(0, 0, 0, 0.05);
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	opacity: 0.7;
}

@media ( max-width: 480px ) {
	.vefm-preorder-tier {
		flex-flow: column wrap;
	}

	/* 2.15.43: a wrapping gallery stuck to the left
	   on phones; centre its images. */
	.vefm-preorder-gallery {
		justify-content: center;
	}
}

.vefm-preorder-tier--reached {
	opacity: 1;
	background: rgba(0, 0, 0, 0.08);
	font-weight: 600;
}

.vefm-preorder-tier-icon {
	width: 18px;
	color: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	font-weight: 700;
}

.vefm-preorder-tier-label {
	flex: 1;
}

.vefm-preorder-tier-amount {
	opacity: 0.8;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
}

.vefm-preorder-product-tier-badge {
	display: block;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.65;
	margin-top: 2px;
}

.vefm-preorder-tier-notice {
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.7;
	margin: 0 0 12px;
}

/* Bouton d'achat de billet intégré au bloc Concerts (Free, v1.0.21)   */
/* ------------------------------------------------------------------ */

.vefmpro-concert-buy-button {
	border-radius: 4px;
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	min-width: 130px;
}

.vefmpro-concert-buy-remaining {
	font-size: var(--wp--preset--font-size--normal, var(--vefm-font-size-normal));
	opacity: 0.7;
}

.vefmpro-concert-soldout {
	opacity: 0.6;
	font-style: italic;
}

/* v2.11.7 (modale "Voir les billets" 08/09/2026) — jamais
   une nouvelle fenêtre/onglet, juste ce bloc rendu visible par-dessus
   la page au clic (voir vefmpro-frontend.js). */
.vefmpro-ticket-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 0, 0, 0, 0.6 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.vefmpro-ticket-modal-overlay[hidden] {
	display: none;
}

.vefmpro-ticket-modal {
	position: relative;
	background: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--foreground, #1e1e1e );
	border-radius: 8px;
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 24px 24px;
}

.vefmpro-ticket-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: none;
	background: transparent;
	font-size: var(--wp--preset--font-size--medium, var(--vefm-font-size-medium));
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.vefmpro-ticket-modal-loading,
.vefmpro-ticket-modal-error {
	text-align: center;
	opacity: 0.7;
	padding: 24px 0;
}

/* Le contenu injecté (bloc Billetterie réutilisé) n'a plus besoin de
   son propre bouton "Réserver" repliable : la modale elle-même EST déjà
   l'action de dépli — il est masqué ici (le JS le "clique" pour
   dérouler le contenu avant même l'affichage, ce sélecteur couvre le
   cas où il resterait visible un instant). */
.vefmpro-ticket-modal .vefmpro-ticket-reveal {
	display: none;
}

body.vefmpro-modal-open {
	overflow: hidden;
}

/* 2.15.39: Gutenberg constrained layout. WordPress
   caps every direct child of .is-layout-constrained at the theme's
   content width, with a rule of the same weight as ours printed after
   this file — the blocks' own "Max width" setting and default were
   silently ignored. A more specific rule restores them. Wide and full
   alignments are left to the theme: choosing them means "theme width".
   Cart and pre-order keep the theme's content width when their setting
   is left at 0, as WordPress would. */
.is-layout-constrained > .vefm-cart:not(.alignwide):not(.alignfull) {
	max-width: var( --vefm-cart-max-width, var( --wp--style--global--content-size, none ) );
}

.is-layout-constrained > .vefm-preorder:not(.alignwide):not(.alignfull) {
	max-width: var( --vefm-preorder-max-width, var( --wp--style--global--content-size, none ) );
}

.is-layout-constrained > .vefm-donate:not(.alignwide):not(.alignfull) {
	max-width: var( --vefm-donate-max-width, 400px );
}

.is-layout-constrained > .vefm-account:not(.alignwide):not(.alignfull) {
	max-width: var( --vefm-account-max-width, 640px );
}

/* 2.15.41: on phones (<= 480px) the blocks fill the
   width of their container. The default caps (donate 400px, account 640px,
   theme content width for cart and pre-order) are lifted; a "Max width"
   the webmaster set explicitly on a block is emitted as --vefm-*-max-width
   and still wins. Scoped to our own blocks — no theme variable is touched.
   Same selectors as the rules above, printed after them. */
@media ( max-width: 480px ) {
	/* width: 100% + padding + border: without border-box (themes that do not
	   reset it) the block would now overflow its container by the padding,
	   since the 400px cap no longer hides it. Mobile only — desktop look is
	   unchanged. */
	.vefm-donate,
	.is-layout-constrained > .vefm-donate:not(.alignwide):not(.alignfull) {
		box-sizing: border-box;
		max-width: var( --vefm-donate-max-width, none );
	}

	.vefm-account,
	.is-layout-constrained > .vefm-account:not(.alignwide):not(.alignfull) {
		max-width: var( --vefm-account-max-width, none );
	}

	.is-layout-constrained > .vefm-cart:not(.alignwide):not(.alignfull) {
		max-width: var( --vefm-cart-max-width, none );
	}

	.is-layout-constrained > .vefm-preorder:not(.alignwide):not(.alignfull) {
		max-width: var( --vefm-preorder-max-width, none );
	}
}

.vefm-preorder-email-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 12px;
}

.vefm-preorder-email-field input {
	padding: 8px;
	border-radius: 6px;
	/* Neutral grey: readable on a light AND a dark theme (a black border vanishes on dark). */
	border: 1px solid rgba(128, 128, 128, 0.55);
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
}

.vefm-cart-preorder-notice,
.vefm-preorder-separate-notice {
	font-size: var(--wp--preset--font-size--small, var(--vefm-font-size-small));
	opacity: 0.75;
	margin: 0 0 12px;
}

/* 2.18.4: the same look as every VEFmusic button (shared rules in the free
   plugin's vefm-buttons.css, loaded first): accent background, text colour
   from Style > General, full strength at rest, one hover/focus dimming, one
   focus ring, one disabled look. Only the shape is set per button above.
   --vefm-btn-hover-opacity / --vefm-btn-disabled-opacity (Style > General)
   tune the states. Three families: filled, outlined, icon-only. */
.vefm-cart-promo-apply,
.vefm-stripe-checkout,
.vefm-donate-submit,
.vefm-preorder-stripe-checkout,
.vefm-preorder-sandbox-checkout,
.vefm-account-request-form .vefm-button,
.vefm-account-orders .vefm-button-small,
.vefmpro-concert-buy-button {
	border: 0;
	background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) );
	color: var( --vefm-button-text-color, var( --wp--preset--color--background, #fff ) );
	cursor: pointer;
	font-family: var( --vefm-font-family, inherit );
	opacity: 1;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

/* The Stripe button keeps its own brand fallback when no main colour is set. */
.vefm-stripe-checkout {
	background: var( --vefm-button-bg, var( --vefm-accent, var( --wp--preset--color--primary, #635bff ) ) );
}

.vefm-sandbox-checkout,
.vefm-donate-amount,
.vefm-cart-qty-increase,
.vefm-cart-qty-decrease,
.vefmpro-ticket-reveal {
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.vefm-cart-remove,
.vefm-cart-promo-applied .vefm-cart-promo-remove,
.vefmpro-ticket-modal-close {
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

:is(
	.vefm-cart-promo-apply,
	.vefm-stripe-checkout,
	.vefm-donate-submit,
	.vefm-preorder-stripe-checkout,
	.vefm-preorder-sandbox-checkout,
	.vefm-account-request-form .vefm-button,
	.vefm-account-orders .vefm-button-small,
	.vefmpro-concert-buy-button,
	.vefm-sandbox-checkout,
	.vefm-donate-amount,
	.vefm-cart-qty-increase,
	.vefm-cart-qty-decrease,
	.vefmpro-ticket-reveal,
	.vefm-cart-remove,
	.vefm-cart-promo-applied .vefm-cart-promo-remove,
	.vefmpro-ticket-modal-close
):is( :hover, :focus-visible ):not( :disabled ) {
	opacity: var( --vefm-btn-hover-opacity, 0.85 );
}

:is(
	.vefm-cart-promo-apply,
	.vefm-stripe-checkout,
	.vefm-donate-submit,
	.vefm-preorder-stripe-checkout,
	.vefm-preorder-sandbox-checkout,
	.vefm-account-request-form .vefm-button,
	.vefm-account-orders .vefm-button-small,
	.vefmpro-concert-buy-button
):focus-visible {
	outline: 2px solid var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	outline-offset: 2px;
}

:is(
	.vefm-sandbox-checkout,
	.vefm-donate-amount,
	.vefm-cart-qty-increase,
	.vefm-cart-qty-decrease,
	.vefmpro-ticket-reveal,
	.vefm-cart-remove,
	.vefm-cart-promo-applied .vefm-cart-promo-remove,
	.vefmpro-ticket-modal-close
):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

:is(
	.vefm-cart-promo-apply,
	.vefm-stripe-checkout,
	.vefm-donate-submit,
	.vefm-preorder-stripe-checkout,
	.vefm-preorder-sandbox-checkout,
	.vefm-account-request-form .vefm-button,
	.vefm-account-orders .vefm-button-small,
	.vefmpro-concert-buy-button,
	.vefm-sandbox-checkout,
	.vefm-donate-amount,
	.vefm-cart-qty-increase,
	.vefm-cart-qty-decrease,
	.vefmpro-ticket-reveal
):disabled {
	opacity: var( --vefm-btn-disabled-opacity, 0.6 );
}

/* Pressed in: same effect as the free plugin's buttons (sinks slightly on
   hover and keyboard focus, a bit more while clicked; never when disabled,
   not when less motion is requested, hover only on devices that hover). */
@media ( prefers-reduced-motion: no-preference ) {
	:is(
		.vefm-cart-promo-apply,
		.vefm-stripe-checkout,
		.vefm-donate-submit,
		.vefm-preorder-stripe-checkout,
		.vefm-preorder-sandbox-checkout,
		.vefm-account-request-form .vefm-button,
		.vefm-account-orders .vefm-button-small,
		.vefmpro-concert-buy-button,
		.vefm-sandbox-checkout,
		.vefm-donate-amount,
		.vefm-cart-qty-increase,
		.vefm-cart-qty-decrease,
		.vefmpro-ticket-reveal,
		.vefm-cart-remove,
		.vefm-cart-promo-applied .vefm-cart-promo-remove,
		.vefmpro-ticket-modal-close
	):focus-visible:not( :disabled ) {
		transform: scale( var( --vefm-btn-hover-scale, 0.97 ) );
	}

	@media ( hover: hover ) {
		:is(
			.vefm-cart-promo-apply,
			.vefm-stripe-checkout,
			.vefm-donate-submit,
			.vefm-preorder-stripe-checkout,
			.vefm-preorder-sandbox-checkout,
			.vefm-account-request-form .vefm-button,
			.vefm-account-orders .vefm-button-small,
			.vefmpro-concert-buy-button,
			.vefm-sandbox-checkout,
			.vefm-donate-amount,
			.vefm-cart-qty-increase,
			.vefm-cart-qty-decrease,
			.vefmpro-ticket-reveal,
			.vefm-cart-remove,
			.vefm-cart-promo-applied .vefm-cart-promo-remove,
			.vefmpro-ticket-modal-close
		):hover:not( :disabled ) {
			transform: scale( var( --vefm-btn-hover-scale, 0.97 ) );
		}
	}

	:is(
		.vefm-cart-promo-apply,
		.vefm-stripe-checkout,
		.vefm-donate-submit,
		.vefm-preorder-stripe-checkout,
		.vefm-preorder-sandbox-checkout,
		.vefm-account-request-form .vefm-button,
		.vefm-account-orders .vefm-button-small,
		.vefmpro-concert-buy-button,
		.vefm-sandbox-checkout,
		.vefm-donate-amount,
		.vefm-cart-qty-increase,
		.vefm-cart-qty-decrease,
		.vefmpro-ticket-reveal,
		.vefm-cart-remove,
		.vefm-cart-promo-applied .vefm-cart-promo-remove,
		.vefmpro-ticket-modal-close
	):active:not( :disabled ) {
		transform: scale( 0.95 );
	}
}