/**
 * vefm-frontend.css
 *
 * Hérite des variables CSS exposées par theme.json du thème actif
 * (--wp--preset--color--*, etc.) avec un repli raisonnable si le thème
 * n’expose rien — même approche que le bloc VEFphotos. Les blocs restent
 * surchargeables via les contrôles natifs (color/typography/spacing)
 * déclarés dans chaque block.json ; ce fichier ne fixe que la mise en page
 * et les états d’interaction (hover, disabled), jamais les couleurs de
 * marque.
 */

/* Point 1 suite — Divi 5 (demande Eric, 10/09/2026) : le contrôle natif
   "Rayon de bordure" de Divi 5 (onglet Style > Bordure, chaque module)
   écrit bien un vrai border-radius CSS sur son propre wrapper
   (.et_pb_module) — vérifié en direct (Claude pour Chrome,
   musicproject.local) — mais SANS overflow:hidden, ce rayon reste sans
   effet visuel : le contenu réel du bloc (fond/bordure du module
   VEFmusic) déborde du coin arrondi au lieu de le suivre. Cette seule
   règle suffit à le rendre pleinement fonctionnel, sur les 6 modules
   Divi 5 Free — AUCUN champ personnalisé nécessaire ici, contrairement
   à Gutenberg (où le support natif WordPress s’est révélé peu fiable
   selon le thème, cf. VEFM_Renderer::build_style_vars()). Seule la
   zone de CONTENU (une piste, une carte de concert) garde besoin d’un
   champ personnalisé Divi dédié, une carte/piste individuelle n’étant
   pas le "conteneur" du module au sens de Divi. */
.et_pb_module.vefm_divi_track_list,
.et_pb_module.vefm_divi_album,
.et_pb_module.vefm_divi_concerts,
.et_pb_module.vefm_divi_featured_concert,
.et_pb_module.vefm_divi_past_concerts {
	overflow: hidden;
}

.vefm-track-list,
.vefm-album,
.vefm-concerts,
/* Point 1 suite — Elementor (10/09/2026) : les widgets "Prochain
   concert" et "Concerts passés" enveloppent leur contenu dans une
   classe UNIQUE (.vefm-featured-concert / .vefm-past-concerts), sans
   la classe .vefm-concerts partagée qu’utilisent Gutenberg et Divi 5
   pour ces mêmes blocs — trouvaille faite en câblant "Block corners"
   pour Elementor. Ajoutées ici pour que le rayon du conteneur
   fonctionne sur les 3 builders sans devoir changer le HTML déjà en
   production (risque de casser un CSS personnalisé déjà écrit par un
   webmaster ciblant ces classes). */
.vefm-featured-concert,
.vefm-past-concerts {
	font-family: var( --vefm-font-family, inherit );
	color: inherit;
	/* Point 1 (demande Eric, 10/09/2026) : angles arrondis du bloc
	   lui-même (son conteneur extérieur), réglables indépendamment par
	   coin — voir VEFM_Renderer::build_style_vars() pour l’assemblage
	   de --vefm-block-radius. Aucun réglage de ce type n’existait avant
	   sur ces 3 blocs (confirmé par relecture du fichier), repli à 0
	   donc sans risque de régression. border-radius seul arrondit déjà
	   le fond/la bordure PROPRES du bloc (spec CSS) ; un enfant qui
	   déborderait visuellement du coin (image collée au bord) ne
	   serait clippé qu’avec overflow:hidden — pas ajouté ici par
	   prudence (casserait un menu déroulant qui dépasse
	   intentionnellement, ex. .vefm-album-tracklist-details). */
	border-radius: var( --vefm-block-radius, 0 );
}

/* Texte masqué visuellement, disponible pour les lecteurs d’écran
   (v1.2.1) — ex. avertir qu’un lien ouvre un nouvel onglet, sans
   l’afficher pour les visiteurs voyants. Même technique que
   vefm-ratings.css (.vefm-sr-only), dupliquée ici volontairement : les
   deux fichiers CSS restent indépendants (voir docblock de
   vefm-ratings.css), jamais l’un ne dépend du chargement de l’autre. */
.vefm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Liste de morceaux / Album — lecteur                               */
/* ---------------------------------------------------------------- */

.vefm-track-list,
.vefm-album-tracklist {
	display: flex;
	flex-direction: column;
	gap: var( --vefm-track-gap, 14px );
}

.vefm-track {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: var( --vefm-track-padding, 10px 16px );
	/* Point 1 suite (10/09/2026) : --vefm-content-radius (nouveau, 4
	   coins) prend le pas sur --vefm-track-radius (ancien réglage
	   unique, remplacé côté Gutenberg mais gardé en repli pour
	   Elementor/Divi 5 tant qu’ils n’ont pas été migrés).
	   Retour Paul (10/09/2026) : le repli final doit être 0, pas 10px
	   — sinon "0" réglé dans Style ne donne pas visuellement 0. */
	border-radius: var( --vefm-content-radius, var( --vefm-track-radius, 0 ) );
	background: var( --vefm-track-bg, rgba(0, 0, 0, 0.14) );
	color: var( --vefm-track-text, inherit );
	border: 1px solid rgba(0, 0, 0, 0.12);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.vefm-track:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.vefm-track-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5ch;
}

.vefm-track.is-playing {
	background: var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) );
	background: color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) ) 8%, transparent );
	border-color: color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #6b6b6b ) ) 25%, transparent );
}

/* Bouton lecture — cercle plein, icônes SVG superposées (play/pause) */

.vefm-play {
	flex: 0 0 auto;
	position: relative;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	border-radius: 50%;
	border: none;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: var( --wp--preset--color--background, #fff );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s ease, opacity 0.15s ease;
}

.vefm-play:hover {
	transform: scale(1.06);
}

.vefm-play:active {
	transform: scale(0.96);
}

.vefm-play--disabled {
	background: transparent;
	color: rgba(0, 0, 0, 0.2);
	cursor: default;
}

.vefm-play .vefm-icon-play,
.vefm-play .vefm-icon-pause {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.vefm-play--disabled .vefm-icon-play {
	width: 16px;
	height: 16px;
}

/* Corps : titre, durée, commentaire, barre de progression.
   Largeur bornée au contenu réel (pas de flex-grow) pour laisser
   l’espace libre à l’égaliseur (.vefm-equalizer, flex:1 1 auto plus
   bas), qui doit rester le SEUL élément à absorber l’espace restant et
   s’y centrer. */

.vefm-track-body {
	/* v2.10.12 (retour Paul, bêta-testeur) : flex-grow réactivé par
	   erreur le 07/09/2026 (voir historique) — remis à 0 comme
	   documenté ci-dessus (l’égaliseur est seul censé grandir), la base
	   passe de la valeur figée 260px à "auto" (calée sur le contenu
	   réel) pour éviter le nombre en dur d’origine sans réintroduire la
	   concurrence de grandissement avec l’égaliseur. */
	flex: 0 1 auto;
	min-width: 0; /* permet au titre de tronquer proprement en flex */
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 4px;
}

.vefm-track-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.vefm-track-title-row{
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	flex: 1 1 auto;
	flex-flow: row wrap;
	min-width: 0;
	gap: .5ch;
}

.vefm-track-title {
	display: inline-flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-weight: 600;
	gap: .5ch;
}

.vefm-track-album-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.08);
	color: inherit;
	font-size: max(1rem, 0.72em);
	font-weight: 500;
	letter-spacing: 0.02em;
	vertical-align: middle;
	opacity: 0.75;
}

/* Retour Eric (15/09/2026 — « on a assez de pastilles ») : texte simple
   et discret, même traitement que .vefm-track-time ci-dessous — plus
   de fond/pastille, cohérent avec le style choisi côté PDF pour la
   même information (voir VEFM_Press_Kit). */
.vefm-track-listen-badge {
	font-size: max(1rem, 0.85em);
	opacity: 0.6;
	vertical-align: middle;
}

.vefm-track-listen-badge--preview {
	color: rgb(180, 110, 20);
	opacity: 0.85;
}

.vefm-track-listen-badge--full {
	color: inherit;
}

.vefm-track-cover {
	width: 26px;
	height: 26px;
	object-fit: cover;
	border-radius: 4px;
}

/* Égaliseur — barres réellement pilotées par l’analyse audio en temps réel
   (Web Audio API, voir vefm-frontend.js), ordonnées graves → aigus de
   gauche à droite (les fréquences basses occupent les premiers indices
   du tableau d’analyse). Masqué par défaut, révélé uniquement sur le
   morceau en cours de lecture. Occupe l’espace flexible restant entre le
   corps du morceau (largeur bornée) et le volume/prix, et centre son
   contenu dedans — d’où sa position "au milieu" de la ligne plutôt que
   collé à un élément précis. La hauteur de chaque barre est fixée en JS
   (style="height:...%") à chaque frame ; la transition CSS lisse juste
   les variations d’une frame à l’autre. */

.vefm-equalizer {
	display: none;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	height: 56px;
	flex: 1 1 auto;
}

.vefm-track.is-playing .vefm-equalizer {
	display: flex;
}

.vefm-equalizer-bar {
	width: calc(100% / 18);
	height: 15%;
	border-radius: 1px;
	/* Deux calques superposés : le dégradé façon VU-mètre (couleur
	   principale en bas → couleur de pic en haut, mélangées automatiquement
	   au milieu), PUIS un quadrillage horizontal sombre qui découpe la barre
	   en segments façon LED — l’effet "chaîne hifi" recherché, plutôt qu’une
	   barre pleine continue. */
	background-image:
		repeating-linear-gradient( to top, transparent 0, transparent 3px, rgba(0, 0, 0, 0.45) 3px, rgba(0, 0, 0, 0.45) 4px ),
		linear-gradient(
			to top,
			var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 0%,
			color-mix( in srgb, var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) ) 50%, var( --vefm-vu-peak, #ef4444 ) 50% ) 55%,
			var( --vefm-vu-peak, #ef4444 ) 100%
		);
	/* Transition quasi nulle : la ballistique (montée immédiate, descente
	   progressive) est désormais pilotée image par image en JS — une
	   transition CSS supplémentaire ici ne ferait que ramollir l’effet. */
	transition: height 0.03s linear;
}

.vefm-track-number {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.vefm-track-time {
	flex: 0 0 auto;
	font-size: max(1rem, 0.85em);
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.vefm-track-comment {
	display: block;
	font-size: max(1rem, 0.85em);
	opacity: 0.7;
}

/* v2.15.0 (demande Eric, 12/09/2026) : paroles déplacées EN DESSOUS de
   toute la ligne (avant : dans .vefm-track-body, entre le commentaire et
   la barre de progression — poussait l’égaliseur vers le bas via
   align-self:flex-end, voir plus haut). flex:1 1 100% force un retour à
   la ligne dans .vefm-track (flex-wrap:wrap, voir plus haut) quel que
   soit l’espace restant sur la ligne du dessus — dernier enfant du
   conteneur, jamais mélangé avec .vefm-track-body. */
.vefm-track-lyrics {
	flex: 1 1 100%;
	text-align: center;
}

.vefm-lyrics-toggle {
	display: inline-block;
	margin: 4px 0;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	text-decoration: underline;
	opacity: 0.75;
	font-size: max(0.95rem, 0.8em);
	cursor: pointer;
}

.vefm-lyrics-toggle:hover,
.vefm-lyrics-toggle:focus-visible {
	opacity: 1;
}

.vefm-lyrics-panel {
	display: flex;
	justify-content: center;
	white-space: normal;
	font-size: max(1rem, 0.85em);
	text-align: left;
	line-height: 1.6;
	opacity: 0.85;
	margin: 4px 0 8px;
	padding: 8px 12px;
	border-left: 3px solid currentColor;
	border-radius: 2px;
	background: rgba(128, 128, 128, 0.08);
}

/* v2.3.7 — BUG RÉEL trouvé et corrigé (signalé par Eric, panneau déplié
   dès le chargement de la page ET le clic sur le bouton sans aucun
   effet) : la règle .vefm-lyrics-panel ci-dessus force display:block
   INCONDITIONNELLEMENT, ce qui écrase la règle par défaut du navigateur
   [hidden] { display: none; } — une déclaration display explicite
   d’auteur prime toujours sur celle, implicite, de la feuille de style
   interne du navigateur pour l’attribut hidden. Le JS
   (handleLyricsToggle() dans vefm-frontend.js) posait/retirait bien
   l’attribut hidden correctement, mais ça n’avait plus aucun effet
   visuel : le panneau restait visible en permanence, dans les deux
   états. Corrigé en réaffirmant explicitement display:none pour l’état
   caché, avec une spécificité qui l’emporte sur la règle display:block
   ci-dessus (sélecteur d’attribut, plus spécifique qu’un sélecteur de
   classe seul). */
.vefm-lyrics-panel[hidden] {
	display: none;
}

.vefm-track-progress {
	cursor: pointer;
	padding: 5px 0; /* zone cliquable plus généreuse que la barre visible */
	border-radius: 4px;
}

/* Accessibilité clavier (v1.2.1) : la barre est focusable (tabindex="0",
   voir track-row.php) — indicateur de focus explicite plutôt que de
   compter sur le style par défaut du navigateur, peu visible sur cette
   forme fine. :focus-visible = uniquement au clavier, jamais au clic
   souris (pas de halo intrusif pour un simple clic de positionnement). */
.vefm-track-progress:focus-visible {
	outline: 2px solid var( --vefm-accent-color, #2271b1 );
	outline-offset: 3px;
}

.vefm-track-progress-track {
	position: relative;
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.vefm-track-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	border-radius: 2px;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	transition: width 0.1s linear;
}

.vefm-track.is-playing .vefm-track-progress-fill {
	background: currentColor;
}

/* Volume — masqué par défaut, révélé uniquement sur le morceau en
   cours de lecture (un seul <audio> partagé pour toute la page).
   Regroupé dans une pilule discrète, curseur entièrement restylé
   (le rendu natif du navigateur ne s’intègre pas visuellement). */

.vefm-track-volume {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.06);
	padding: 6px 12px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(2px);
	animation: vefm-fade-in 0.18s ease forwards;
}

@keyframes vefm-fade-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.vefm-track.is-playing .vefm-track-volume {
	display: flex;
}

.vefm-volume-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
	display: flex;
	align-items: center;
	padding: 0;
	flex: 0 0 auto;
}

.vefm-volume-toggle:hover {
	opacity: 1;
}

.vefm-volume-toggle .vefm-icon {
	width: 2em;
	height: 2em;
	fill: currentColor;
}

.vefm-volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 72px;
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
	outline: none;
	cursor: pointer;
	margin: 0;
}

/* Accessibilité clavier (v1.2.1) : outline:none ci-dessus retire
   l’anneau de focus PAR DÉFAUT du navigateur — sans cette règle de
   remplacement, un curseur de volume atteint au clavier (Tab) devenait
   totalement invisible (aucun indicateur de focus). :focus-visible
   uniquement (jamais au simple clic souris). */
.vefm-volume-slider:focus-visible {
	outline: 2px solid var( --vefm-accent-color, #2271b1 );
	outline-offset: 2px;
}

.vefm-volume-slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
}

.vefm-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border-radius: 50%;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	border: 2px solid var( --wp--preset--color--background, #fff );
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: transform 0.12s ease;
}

.vefm-volume-slider::-webkit-slider-thumb:hover {
	transform: scale(1.25);
}

.vefm-volume-slider::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.15);
}

.vefm-volume-slider::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	border: 2px solid var( --wp--preset--color--background, #fff );
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: transform 0.12s ease;
}

.vefm-volume-slider::-moz-range-thumb:hover {
	transform: scale(1.25);
}

/* Prix + panier */

.vefm-track-shop {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.vefm-track-price {
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Bouton d’action panier — deux variantes volontairement distinctes,
   jamais l’une un correctif de l’autre (v2.15.3, retour Paul du
   10/09/2026 repris ici) :
   - .vefm-add-to-cart seul (bouton panier PAR PISTE, dans la colonne
     .vefm-track-buttons) : rond compact, assorti aux boutons
     lecture/volume qui l’entourent.
   - .vefm-add-to-cart.vefm-buy-album (bouton "Acheter l’album",
     album-header.php, contexte plus large) : pilule classique. */
.vefm-add-to-cart,
.vefm-buy-album {
	flex: 0 0 auto;
	display: inline-flex;
	margin: 0 auto;
	border: none;
	font-size: 1rem;
	color: var( --wp--preset--color--background, #fff );
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	cursor: pointer;
	gap: 6px;
	transition: opacity 0.15s ease;
}

.vefm-add-to-cart:not( .vefm-buy-album, .vefmpro-ticket-zone .vefm-add-to-cart, .vefmpro-merch-item-add .vefm-add-to-cart ) {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 5px;
	border-radius: 999px;
	gap: initial;
}

.vefm-buy-album {
	align-items: flex-start;
	justify-content: flex-start;
	border-radius: 4px;
	padding: 8px 16px;
}

.vefm-add-to-cart:hover,
.vefm-buy-album:hover {
	opacity: 0.85;
}

.vefm-add-to-cart:disabled {
	opacity: 0.6;
	cursor: wait;
}

.vefm-add-to-cart .vefm-icon-cart {
	width: 18px;
	height: 18px;
	fill: none;
}

.vefm-album-header {
	display: flex;
	gap: 20px;
	margin-bottom: 24px;
	align-items: flex-start;
}

/* v2.10.0 : sans min-width:0, la zone de texte (titre/description/prix)
   ne rétrécissait jamais sous sa taille de contenu minimale — pouvait
   déborder hors de l’écran sur mobile si la description était longue. */
.vefm-album-info {
	flex: 1 1 auto;
	min-width: 0;
}

/* Retour Paul (10/09/2026) : onglet Album n’avait de réglages que pour
   les pistes — rien pour le titre/la description du bloc lui-même.
   Repli "unset" volontaire (pas une taille/couleur en dur) : tant que
   rien n’est réglé, le rendu reste EXACTEMENT celui d’avant (hérité du
   thème/de l’élément h3), aucune régression visuelle sur un site
   existant. */
.vefm-album-title {
	color: var( --vefm-album-title-color, inherit );
	font-size: var( --vefm-album-title-size, unset );
}

.vefm-album-description {
	color: var( --vefm-album-description-color, inherit );
}

/* Variante compacte — utilisée en mode "Regrouper par album" du bloc
   Liste de morceaux, où un en-tête complet par album (avec description)
   alourdirait une longue liste de plusieurs albums. */
.vefm-album-header--compact {
	gap: 14px;
	margin-bottom: 12px;
	align-items: center;
}

.vefm-album-cover {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vefm-album-header--compact .vefm-album-cover img {
	max-width: 56px;
	border-radius: 6px;
}

.vefm-album-header--compact .vefm-album-title {
	font-size: 1.1em;
	margin: 0;
}

.vefm-album-header--compact .vefm-album-price {
	margin: 4px 0 0;
	font-size: max(1rem, 0.9em);
}

.vefm-album-header + .vefm-album-tracklist-details {
	margin-bottom: 32px;
}

.vefm-tracklist-other-heading {
	margin: 24px 0 12px;
	font-size: 1em;
	opacity: 0.6;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vefm-album-cover img {
	max-width: clamp(160px, 20vw, 300px);
	height: auto;
	border-radius: 8px;
}

/* Tracklist repliable — <details>/<summary> natif, aucun JS. */

.vefm-album-tracklist-details {
	margin-top: 4px;
}

.vefm-album-tracklist-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	padding: 10px 16px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.05);
	font-weight: 600;
	font-size: max(1rem, 0.9em);
	user-select: none;
}

.vefm-album-tracklist-summary::-webkit-details-marker {
	display: none; /* Chevron maison ci-dessous plutôt que le triangle par défaut du navigateur. */
}

.vefm-album-tracklist-summary:hover {
	background: rgba(0, 0, 0, 0.08);
}

.vefm-album-tracklist-chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.vefm-album-tracklist-details[open] .vefm-album-tracklist-chevron {
	transform: rotate(180deg);
}

.vefm-album-tracklist-details .vefm-album-tracklist {
	margin-top: 10px;
}

.vefm-album-discount-hint {
	display: block;
	font-size: max(1rem, 0.8em);
	opacity: 0.65;
	font-weight: 400;
}

/* Petits écrans : on passe en colonne pour éviter l’entassement */

@media (max-width: 480px) {
	.vefm-track {
		flex-direction: column;
		align-items: center;
	}

	.vefm-track-buttons {
		flex-flow: row wrap;
		justify-content: center;
	}

	.vefm-track-shop {
		margin: auto;
	}

	.vefm-track-title-row {
		justify-content: center;
	}

	.vefm-track-body {
		flex-basis: 100%;
		max-width: 100%;
		order: 3;
	}

	.vefm-album-header {
		flex-wrap: wrap;
		justify-content: center;
	}

	.vefm-track-album-badge {
		display: inline-flex;
		margin-left: 0;
		padding: .5em;
		letter-spacing: initial;
		overflow-wrap: anywhere;
	}

	.vefm-album-header .vefm-album-info {
		flex-basis: 100%;
	}
}

/* ---------------------------------------------------------------- */
/* Concerts                                                          */
/* ---------------------------------------------------------------- */

/* Mise en page UNIFIÉE entre le mode liste et le mode vedette : mêmes
   tailles, mêmes proportions partout. Seule différence réelle : le mode
   vedette n’affiche qu’un concert (featuredMode côté PHP), avec
   l’étiquette "Prochain concert" en plus. */

.vefm-concert {
	display: flex;
	align-items: stretch;
	gap: 16px;
	padding: 14px 18px;
	margin-bottom: var( --vefm-concert-gap, 10px );
	/* Point 1 suite (10/09/2026) : --vefm-content-radius (nouveau, 4
	   coins, réglable dans Concerts/Prochain concert/Concerts passés)
	   prend le pas sur --vefm-concert-radius (existait dans le code
	   depuis longtemps mais jamais relié à un réglage dans l’éditeur —
	   gardé en repli, sans effet réel avant ce chantier).
	   Retour Paul (10/09/2026) : replis finaux (radius ET bordure)
	   remis à 0 — un repli non nul masquait "0" réglé dans Style. */
	border-radius: var( --vefm-content-radius, var( --vefm-concert-radius, 0 ) );
	background: var( --vefm-concert-bg, var( --vefm-track-bg, rgba(0, 0, 0, 0.14) ) );
	color: var( --vefm-concert-text, inherit );
	border: var( --vefm-concert-border-width, 0 ) solid var( --vefm-concert-border-color, rgba(0, 0, 0, 0.12) );
	transition: box-shadow 0.15s ease;
	overflow: hidden;
}

/* v2.14.0 (retour Eric) : pas de marge basse sur le dernier concert de la
   liste — les concerts sont des enfants directs sans wrapper intermédiaire,
   :last-child suffit. */
.vefm-concert:last-child {
	margin-bottom: 0;
}

.vefm-concert:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Affiche (quand un concert a une image) — toujours une vraie image à
   côté du texte, jamais en fond plein. Grille CSS (plus fiable qu’un
   flex + stretch + aspect-ratio, qui provoquait une croissance
   incontrôlée de l’image — largeur ET hauteur sont ici bien définies
   indépendamment, sans dépendance circulaire) : largeur fixe raisonnable,
   hauteur calée sur la hauteur réelle de la ligne (donc sur le texte),
   avec un plafond de sécurité pour éviter tout débordement si le texte
   est exceptionnellement long. */

.vefm-concert--has-poster {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	padding: 0;
}

.vefm-concert-poster-wrap {
	height: 100%;
	overflow: hidden;
}

.vefm-concert-poster {
	display: flex;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vefm-concert--has-poster .vefm-concert-body,
.vefm-concert--has-poster .vefm-concert-ticket {
	/* v2.10.12 (retour Paul + retour Eric sur l’effet desktop du vw pur) :
	   clamp() plutôt qu’un vw brut ou une paire fixe+media-query séparée —
	   une seule règle couvre maintenant TOUTES les tailles d’écran :
	   jamais en dessous de 8px (mobile étroit), jamais au-dessus de 24px
	   (desktop large/ultra-large), fluide entre les deux via 2vw. Plus
	   besoin de dupliquer cette valeur dans le bloc mobile plus bas. */
	padding: clamp(8px, 2vw, 24px);
}

@media (max-width: 480px) {
	.vefm-concert--has-poster {
		grid-template-columns: 100px minmax(0, 1fr);
	}
}

/* Corps en deux zones (contenu + billetterie) plutôt qu’empilement
   simple, pour mieux occuper la largeur disponible sur un grand écran —
   la billetterie se place à droite plutôt que de laisser un grand vide,
   tout en restant responsif (repasse en colonne sur petit écran, voir
   media query plus bas). */

.vefm-concert-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	/* Retour Paul (11/09/2026) : équivalent strict en un seul raccourci. */
	flex-flow: row wrap;
	align-items: center;
	/* Retour Paul (16/09/2026) : space-between mal placé quand ce
	   conteneur passe en colonne sur petit écran (un élément seul sur
	   sa ligne se retrouve à gauche au lieu de rester aligné à droite). */
	justify-content: flex-end;
	gap: 16px 28px;
	padding: 4px 0;
}

.vefm-concert-main {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* En-tête : badge date regroupé avec le titre/lieu plutôt qu’empilé seul
   au-dessus — agencement plus dense, plus proche d’une affiche/billet de
   concert classique. */

.vefm-concert-header {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vefm-concert-heading {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vefm-concert-date-badge {
	flex: 0 0 auto;
	/* v2.15.0 (retour Eric, 12/09/2026) : 64px débordait aussi en mobile
	   pour les mois dont l’abréviation dépasse 3 lettres selon la locale
	   (ex. « sept. », « juil. ») — même correctif que la largeur desktop
	   ci-dessous, proportionnellement. */
	width: 84px;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
	background: var( --vefm-concert-badge, #606060 );
	/* Retour Paul (10/09/2026) : le fond du badge est réglable mais pas
	   son texte — --vefm-concert-badge-text (nouveau) prend le pas sur
	   l’ancien repli (couleur de fond du thème), lui-même conservé en
	   dernier recours pour ne rien changer visuellement sur un site qui
	   n’aurait rien réglé. */
	color: var( --vefm-concert-badge-text, var( --wp--preset--color--background, #fff ) );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	gap: 1px;
}

.vefm-concert-date-day {
	font-size: 1.4em;
	font-weight: 700;
}

.vefm-concert-date-month {
	font-size: 1.2em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.95;
}

.vefm-concert-date-year {
	font-size: 1.2em;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

/* Puce date un peu plus visible sur écran large (retour Eric 11/08/2026) —
   volontairement limité au desktop (≥641px, même seuil que le passage en
   colonne du bloc à 640px un peu plus bas) : le rendu mobile, déjà réglé
   avec soin, n’est PAS touché ici. */
@media ( min-width: 641px ) {
	.vefm-concert-date-badge {
		/* v2.15.0 (retour Eric, 12/09/2026) : 76px débordait pour les mois
		   dont l’abréviation dépasse 3 lettres selon la locale (ex.
		   « sept. », « juil. »). */
		width: 100px;
		height: auto;
	}

	.vefm-concert-date-day {
		font-size: 1.6em;
	}

	.vefm-concert-date-month,
	.vefm-concert-date-year {
		font-size: 1.3em;
	}
}

.vefm-concert-eyebrow {
	display: block;
	font-size: max(1rem, 0.78em);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
	color: var( --vefm-concert-eyebrow-color, inherit );
}

.vefm-concert-title {
	margin: 0;
	font-size: var( --vefm-concert-title-size, max( 1rem, 1.15em ) );
	/* v2.14.0 (retour Eric) : jusqu’ici sans réglage de couleur dédié
	   (seule la taille l’était) — hérite du texte du bloc par défaut. */
	color: var( --vefm-concert-title-color, inherit );
	font-weight: 700;
	line-height: 1.25;
}

/* Compte à rebours (v1.3.0) — mode vedette uniquement. v1.3.8 : couleur
   dédiée réglable (VEFmusic > Style > Prochain concert), retombe par
   défaut sur --vefm-concert-text (la couleur de texte déjà choisie pour
   le bloc) plutôt que sur --vefm-accent — l’ancien repli pouvait rendre
   le compte à rebours invisible sur un fond sombre si l’accent du thème
   était lui-même sombre (signalé par Eric). */
.vefm-concert-countdown {
	margin: 2px 0 0;
	font-size: max( 1rem, 0.9em );
	font-weight: 600;
	color: var( --vefm-concert-countdown-color, var( --vefm-concert-text, inherit ) );
}

/* Concert déjà passé (archive, v1.3.0) — léger estompage, jamais
   illisible : reste un contenu à part entière, juste visuellement
   distinct d’un concert à venir. */
.vefm-concert--past {
	opacity: 0.7;
}

/* Repli "aucun concert" avec réseaux sociaux (v1.3.0). */
.vefm-concerts-empty-social {
	margin-top: 8px;
	opacity: 0.85;
}

.vefm-concerts-empty-social a {
	font-weight: 600;
}

.vefm-concert-venue {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	font-size: var( --vefm-concert-venue-size, max( 1rem, 1.05em ) );
	color: var( --vefm-concert-venue-color, inherit );
	opacity: 0.85;
}

/* Tarif indicatif (v0.46.11, restauré v1.3.14 — régression réelle
   corrigée) — simple information, jamais un vrai bouton d’achat (ça
   reste le rôle du bloc Billetterie interne, VEFmusic Pro). */
.vefm-concert-price {
	display: flex;
	align-items: center;
	/* v2.11.8 : 8px entre l’icône de paiement et le montant (au lieu de
	   4px) — plus d’air, surtout depuis l’agrandissement des icônes
	   (14px→17px, même session). 4px gardé pour l’espacement vertical
	   si jamais ça passe à la ligne. */
	gap: 4px 8px;
	margin: 4px 0 0;
	font-size: max( 0.95rem, 0.9em );
	font-weight: 600;
	opacity: 0.85;
}

.vefm-concert-price .vefm-icon-payment {
	opacity: 0.85;
}

.vefm-icon-pin {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	opacity: 0.9;
	fill: none;
	stroke: var( --vefm-concert-pin, #e2483d );
}

.vefm-icon-clock,
.vefm-icon-payment {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	opacity: 0.75;
	vertical-align: -2px;
	fill: none;
	stroke: var( --vefm-concert-pin, #e2483d );
}

/* v2.10.22 : remplace l’ancien point CSS (::before, content:'·') devant
   l’horaire — un vrai repère visuel (icône) plutôt qu’un simple séparateur
   typographique, demande de Paul. Avantage direct : l’icône a un sens
   propre même seule en début de ligne (contrairement au point, orphelin
   sans le lieu juste avant) — l’affichage mobile retiré en v2.10.19 (voir
   ancien commentaire, supprimé ci-dessous) n’a donc plus lieu d’être :
   l’horaire redevient visible sur téléphone. */
.vefm-concert-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.vefm-concert-description {
	margin: 0;
	font-size: max(1rem, 0.9em);
	opacity: 0.8;
	line-height: 1.4;
}

.vefm-concert-description p {
	margin: 0 0 6px;
}

/* v2.12.0 (demande Eric, 10/09/2026) : aperçu 250 caractères + bouton
   "En savoir plus"/"Voir moins" — remplace l’ancienne limite de saisie
   admin. .vefm-concert-description-rest reste caché via l’attribut HTML
   natif [hidden] tant que assets/js/vefm-frontend.js ne l’a pas retiré
   au clic (voir handleConcertDescriptionToggle()) — fonctionne même si
   JS est désactivé (le texte reste simplement replié, jamais perdu). */
.vefm-concert-description-toggle {
	display: inline-block;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	font: inherit;
	font-weight: 600;
	font-size: max(0.95rem, 0.85em);
	text-decoration: underline;
	cursor: pointer;
}

.vefm-concert-description-toggle:hover,
.vefm-concert-description-toggle:focus-visible {
	opacity: 0.8;
}

.vefm-concert-actions {
	flex: 0 0 auto;
	display: flex;
	/* v2.10.12 (retour Paul, bêta-testeur) : passage colonne → ligne
	   (1 à 3 petits liens seulement — "Site du lieu"/"Billets"/action Pro
	   éventuelle — plus compact en ligne). justify-content:flex-end
	   ajouté en plus de la proposition de Paul : en mode ligne c’est lui,
	   pas align-items, qui contrôle l’ancrage horizontal — sans lui les
	   liens se seraient retrouvés alignés à GAUCHE au lieu de rester à
	   droite comme avant. */
	flex-flow: row wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 8px;
}

.vefm-concert-ticket-link {
	flex: 0 0 auto;
	padding: 10px 24px;
	border-radius: 20px;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: var( --wp--preset--color--background, #fff );
	text-decoration: none;
	font-size: max(1rem, 0.9em);
	font-weight: 600;
	white-space: wrap;
	transition: opacity 0.15s ease;
}

.vefm-concert-ticket-link:hover {
	opacity: 0.85;
	color: var( --wp--preset--color--background, #fff );
}

@media (max-width: 640px) {
	.vefm-concert-body {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Bug réel trouvé (11/09/2026, retour Paul/Eric — "boutons action
	   pétés sur mobile") : .vefm-concert-main garde "flex: 1 1 320px"
	   (réglage desktop, pensé pour l’axe HORIZONTAL en ligne — grandir
	   pour occuper la largeur restante à côté des boutons). Une fois
	   .vefm-concert-body repassé en colonne ci-dessus, ce même
	   flex-grow:1 s’applique à l’axe VERTICAL : .vefm-concert-main
	   s’étire pour occuper toute la hauteur disponible du conteneur
	   (hauteur elle-même parfois imposée par une affiche à côté, voir
	   align-items:stretch sur .vefm-concert), repoussant les boutons
	   loin en dessous avec un grand vide entre les deux. Vérifié en
	   direct (captures avant/après) : flex-grow à 0 supprime le vide,
	   .vefm-concert-main ne prend plus que la hauteur dont son propre
	   contenu a besoin. */
	.vefm-concert-main {
		flex: 0 1 auto;
	}

	.vefm-concert-actions {
		align-items: flex-start;
		/* Retour Eric (11/09/2026, capture à l’appui) : "les boutons
		   sont centrés entre eux mais pas dans la colonne" — exact.
		   align-items: center (v2.11.3, plus bas dans ce fichier)
		   centre bien les boutons L’UN PAR RAPPORT À L’AUTRE, mais
		   DANS ce conteneur, qui lui-même reste collé à gauche de
		   .vefm-concert-body (align-items: flex-start ci-dessus) au
		   lieu de s’étirer sur toute la largeur — donc rien à centrer
		   PAR RAPPORT à la colonne entière. Vérifié en direct
		   (position/largeur réelles mesurées) : align-self: center
		   centre le groupe de boutons dans la largeur complète de la
		   colonne, sans toucher à l’alignement du texte au-dessus
		   (titre/lieu/description restent à gauche, inchangés). */
		align-self: center;
	}
}

@media (max-width: 480px) {
	.vefm-concert-header {
		flex-wrap: wrap;
	}

}

/* Mode vedette "billet" (retour Eric 04/08/2026) — 3 zones côte à côte
   séparées par une ligne de points simulant une perforation (jamais une
   vraie découpe — juste l’évocation d’un billet non détaché). Structure
   volontairement séparée du mode liste ci-dessus : réutilise les mêmes
   classes visuelles (date-badge, eyebrow, title, venue, description,
   ticket-link) mais dans un agencement différent, propre au mode vedette. */

.vefm-concert-ticket {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	gap: 28px;
	padding: 4px 0;
}

.vefm-concert-ticket-zone1 {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.vefm-concert-ticket-time {
	font-size: max(1rem, 0.85em);
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.vefm-concert-ticket-venue-short {
	font-size: max(1rem, 0.85em);
	opacity: 0.75;
	max-width: 90px;
}

/* Perforation — dégradé radial plutôt que border-style:dotted (rendu
   dépendant du navigateur, souvent carré) : points ronds, espacement
   régulier et contrôlé précisément. Marge verticale négative (-16px,
   compense le padding vertical du conteneur — voir la règle
   ".vefm-concert--has-poster .vefm-concert-ticket" plus haut) pour que
   la ligne atteigne vraiment les bords haut/bas de la carte, comme
   demandé, plutôt que de s’arrêter avant. */
.vefm-concert-ticket-divider {
	flex: 0 0 auto;
	width: 1px;
	align-self: stretch;
	margin: -16px 0;
	background-image: radial-gradient( circle, rgba(255, 255, 255, 0.9) 4.5px, transparent 5px );
	background-size: 100% 18px;
	background-repeat: repeat-y;
	background-position: center top;
}

.vefm-concert-ticket-zone2 {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	max-width: 360px;
}

.vefm-concert-ticket-zone2 .vefm-concert-venue {
	margin-top: 4px;
}

.vefm-concert-ticket-address {
	margin: 0 0 0 22px; /* aligné sous le texte, pas sous l’icône pin (14px + 8px de gap) */
	font-size: max(1rem, 0.9em);
	opacity: 0.7;
}

.vefm-concert-ticket-zone3 {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.vefm-concert-ticket-actions {
	/* v2.10.20 (demande Eric, 08/09/2026) : le bouton billetterie
	   interne (Pro) doit apparaître SOUS le bouton "Site web du lieu",
	   pas à côté — colonne plutôt que ligne, alignés entre eux (même
	   ancrage à droite qu’avant, juste empilés verticalement). */
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 8px;
}

@media (max-width: 780px) {
	/* B1 (retour Eric 04/08/2026, élargi 07/09/2026 suite au retour de
	   Paul, bêta-testeur) : la grille affiche/contenu ("160px
	   minmax(0,1fr)", plus haut dans ce fichier) ne repassait JAMAIS en
	   une seule colonne sur mobile — juste plus étroite (160px→100px à
	   480px) — ce qui écrasait tout le contenu du billet dans une
	   colonne trop fine à côté de l’affiche. Affiche en pleine largeur
	   au-dessus ("zone 1 haut"), billet en dessous ("zone 1 bas" +
	   reste). Initialement corrigé UNIQUEMENT en mode vedette
	   (.vefm-concert--featured.vefm-concert--has-poster) — la grille
	   affiche/contenu (160px minmax(0,1fr)) est pourtant la MÊME pour
	   tout concert avec affiche, mode liste inclus (voir
	   .vefm-concert--has-poster plus haut, non scopée à --featured) :
	   le mode liste avait donc exactement le même écrasement, juste
	   jamais repéré au moment du premier correctif. Les 3 règles
	   ci-dessous sont maintenant scopées à .vefm-concert--has-poster
	   SEUL (retrait de la condition --featured) pour couvrir tout
	   concert avec affiche, quel que soit le mode d’affichage.
	   */
	.vefm-concert--has-poster {
		display: block;
		padding: clamp(8px, 2vw, 24px);
	}

	.vefm-concert--has-poster .vefm-concert-poster-wrap {
		width: 100%;
		height: auto;
		margin-bottom: 16px;
		/* Un poster est typiquement en portrait (bien plus haut que
		   large) — "cover" dans une boîte large et courte en rognait une
		   grande partie (visages coupés, etc.). "Contain" + fond
		   assorti au thème montre le poster entier, quitte à laisser un
		   léger espace de part et d’autre plutôt que de perdre du
		   contenu visuel. */
		display: flex;
		align-items: inherit;
		justify-content: center;
		background: rgba(0, 0, 0, 0.2);
	}

	.vefm-concert--has-poster .vefm-concert-poster {
		width: auto;
		height: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.vefm-concert-ticket {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.vefm-concert-ticket-zone1 {
		/* v2.10.9 (retour de Paul, bêta-testeur) : flex-direction: row
		   retiré — provoquait un débordement horizontal sur mobile dès
		   qu’un lieu un peu long se combinait à l’heure à côté du badge
		   date (max-width sur .vefm-concert-ticket-venue-short retiré
		   juste plus bas, spécifiquement pour ce mode mobile, donc plus
		   rien ne borne la largeur du texte en mode ligne). Pas besoin de
		   déclarer flex-direction: column explicitement : c’est déjà la
		   valeur de la règle de base (desktop, plus haut dans ce
		   fichier) — en l’absence de override ici, elle s’applique telle
		   quelle. Vérifié en direct (lieu volontairement long) : tout
		   s’empile proprement, plus de débordement. */
		justify-content: flex-start;
		align-items: center;
		text-align: left;
		gap: 14px;
		padding-bottom: 18px;
	}

	.vefm-concert-ticket-venue-short {
		max-width: none;
	}

	/* Perforation horizontale — sous la Zone 1 uniquement, comme demandé
	   (pas de découpe entre Zone 2 et Zone 3, juste de la marge). Mêmes
	   points agrandis que la version verticale desktop, déborde jusqu’aux
	   bords via une marge négative (compense le padding horizontal du
	   conteneur). */
	.vefm-concert-ticket-divider {
		width: auto;
		height: 1px;
		align-self: stretch;
		margin: 0 -20px;
		background-image: radial-gradient( circle, rgba(255, 255, 255, 0.9) 4.5px, transparent 5px );
		background-size: 18px 100%;
		background-repeat: repeat-x;
		background-position: left center;
	}

	/* B2 : "justify-content: center" (pensé pour le format large desktop,
	   où les 3 zones ont la même hauteur côte à côte) laissait un grand
	   vide en haut/bas une fois les zones empilées en colonne — chaque
	   zone n’a plus besoin d’être centrée verticalement sur mobile. */
	.vefm-concert-ticket-zone2,
	.vefm-concert-ticket-zone3 {
		max-width: none;
		justify-content: flex-start;
		/* Cause réelle du grand vide signalé par Eric : "flex: 1 1 260px"/
		   "320px" (réglé plus haut, pensé pour la LARGEUR en ligne sur
		   desktop) devient une HAUTEUR MINIMALE FORCÉE une fois le
		   conteneur en colonne sur mobile — la zone gardait cette
		   hauteur même quand son contenu réel était plus court.
		   flex-basis: auto annule ça, chaque zone ne prend plus que la
		   hauteur dont son propre contenu a besoin. */
		flex: 0 1 auto;
	}

	.vefm-concert-actions,
	.vefm-concert-ticket-actions {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* v2.11.3 (retour Eric) : BUG RÉEL CORRIGÉ — .vefm-concert-ticket-
	   actions reste en flex-direction: column sur mobile (jamais changé
	   ici, voir sa règle de base plus haut) : dans ce sens, c’est
	   align-items qui contrôle l’axe HORIZONTAL, pas justify-content
	   (qui ne joue que sur l’axe vertical en colonne). La règle
	   ci-dessus posait donc justify-content: center sans aucun effet
	   visible sur ce conteneur précis — align-items: flex-end (réglage
	   desktop, "ancré à droite") restait actif tel quel, les boutons
	   collés à droite au lieu d’être centrés. */
	.vefm-concert-ticket-actions {
		align-items: center;
	}
}

/* Barre d’outils de playlist (v1.3.15) — lecture/pause de toute la      */
/* liste, volume, lecture aléatoire.                                     */
/* v2.10.0 : wrapper interne ajouté — CETTE barre est volontairement     */
/* pleine largeur en permanence (elle surplombe la liste de morceaux,    */
/* contrairement à la pastille compacte du Lecteur aléatoire, voir       */
/* vefm-random-player.css) : le fond/arrondi restent sur le conteneur    */
/* externe, le flex-wrap qui permet le passage à la ligne sur mobile     */
/* est posé sur le wrapper interne.                                      */
.vefm-playlist-toolbar {
	margin: 0 0 14px;
	border-radius: 3em;
	background: rgba(0, 0, 0, 0.04);
}

.vefm-playlist-toolbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
}

.vefm-playlist-playpause {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: var( --wp--preset--color--background, #fff );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vefm-playlist-playpause .vefm-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.vefm-playlist-volume {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vefm-playlist-shuffle {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	padding: 6px 12px;
	cursor: pointer;
	color: inherit;
	opacity: 0.75;
	font-size: 0.85em;
}

.vefm-playlist-shuffle .vefm-icon {
	width: 15px;
	height: 15px;
}

.vefm-playlist-shuffle:hover {
	opacity: 1;
}

.vefm-playlist-shuffle.is-active {
	opacity: 1;
	background: var( --vefm-accent, var( --wp--preset--color--primary, #1e1e1e ) );
	color: var( --wp--preset--color--background, #fff );
	border-color: transparent;
}