/* jw-article-audio.css — bouton « Écouter l'article » et barre de lecture (julienweb.fr, 01/11/2026)
 *
 * Compagnon de js/jw-article-audio.js, qui porte le raisonnement. Ici, deux choses à savoir :
 *
 * LA PLACE EST RÉSERVÉE. Le bouton est posé par le JS, en bas de page ; sans cette réserve il
 * pousserait le TL;DR et tout l'article après le premier rendu (saut de mise en page). Le CSS part
 * dans le <head>, donc la place existe dès le premier affichage. Sans synthèse vocale, le JS pose
 * `.jw-audio-off` et rend la place.
 *
 * LE BOUTON EST UN VRAI <button>, dessiné comme `a.bt.ol` (design.md §3.1) : c'est une action, pas
 * un lien. Le kit Elementor style tous les <button> en 0,2,1, survol et focus compris : d'où le
 * préfixe `body` et les trois états réécrits. Dans la barre sombre : `.wh` et `.gh`.
 */

.elementor-location-single .elementor-widget-post-info {
	padding-bottom: 66px; /* 52 de bouton + 14 sous la ligne date et tags */
}

.elementor-location-single .elementor-widget-post-info.jw-audio-off {
	padding-bottom: 0;
}

.jw-audio {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.jw-audio-msg {
	margin: 0;
	font: 400 12.5px/1.4 Poppins, sans-serif;
	color: #6b6591;
}

.jw-audio-msg:empty {
	display: none;
}

body button.jw-audio-bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: none;
	min-height: 52px;
	margin: 0;
	padding: 0 24px;
	border: 1.5px solid #5A4095;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #5A4095;
	font: 600 15px/1.2 Poppins, sans-serif;
	text-shadow: none;
	cursor: pointer;
	transition: translate .2s ease, background .2s, border-color .2s, color .2s;
}

body button.jw-audio-bt[hidden] {
	display: none;
}

.jw-audio-bt svg {
	flex: none;
	width: 14px;
	height: 14px;
}

body button.jw-audio-bt:focus {
	background: transparent;
	box-shadow: none;
	color: #5A4095;
}

body button.jw-audio-bt:focus-visible {
	outline: 2px solid #1E91D4;
	outline-offset: 2px;
}

@media (hover: hover) {
	body button.jw-audio-bt:hover {
		translate: 0 -2px;
		border-color: #5A4095;
		background: #5A4095;
		box-shadow: none;
		color: #fff;
	}
}

.jw-audio-barre {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	translate: -50% 0;
	z-index: 998; /* sous le header à 999, comme les barres collantes */
	display: flex;
	gap: 8px;
	padding: 8px;
	border-radius: 999px;
	background: #2A2746;
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45);
}

.jw-audio-barre[hidden] {
	display: none;
}

body .jw-audio-barre button.jw-audio-bt {
	min-height: 46px;
	padding: 0 20px;
}

body .jw-audio-barre button.jw-audio-bt.wh,
body .jw-audio-barre button.jw-audio-bt.wh:focus {
	border-color: #fff;
	background: #fff;
	color: #5A4095;
}

body .jw-audio-barre button.jw-audio-bt.gh,
body .jw-audio-barre button.jw-audio-bt.gh:focus {
	border-color: rgba(255, 255, 255, .55);
	background: transparent;
	color: #fff;
}

@media (hover: hover) {
	body .jw-audio-barre button.jw-audio-bt.wh:hover {
		border-color: #fff;
		background: #fff;
		color: #3A2F6E;
	}

	body .jw-audio-barre button.jw-audio-bt.gh:hover {
		border-color: #fff;
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}
}

@media print {
	.elementor-location-single .elementor-widget-post-info {
		padding-bottom: 0;
	}

	.jw-audio,
	.jw-audio-barre {
		display: none;
	}
}