/*
 * Étiquette audio - Présentation audio formation
 * Responsive : Desktop, Tablette, Mobile
 * Police : 'Poppins', sans-serif
 * Image : /assets/images/icons/explication_audio_resized.png
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

/* ========================================
   CONTENEURS PRINCIPAUX
======================================== */

.presentation-intro-media {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.presentation-intro-audio-container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: auto;
	min-width: 250px;
}

.presentation-intro-audio-img {
	width: 48px;
	margin-bottom: 0.5rem;
}

.presentation-intro-audio-block {
	width: 100%;
	margin-top: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.presentation-intro-audio-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: 100%;
	background: var(--color-secondary);
	border-radius: calc(2.8 * (0.4rem + var(--font-heading-5)) / 2);
	padding: 0.6rem 1.2rem 0.6rem 0.6rem;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
	gap: 0.8rem;
	height: calc(2.8 * (0.4rem + var(--font-heading-5)));
	min-height: calc(2.8 * (0.4rem + var(--font-heading-5)));
	position: relative;
}

/* ========================================
   BOUTON PLAY/PAUSE
======================================== */

#audio-play-btn {
	background: none;
	border: none;
	font-size: 1.6rem;
	cursor: pointer;
	color: var(--color-white);
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(2.2 * (0.4rem + var(--font-heading-5)));
	height: calc(2.2 * (0.4rem + var(--font-heading-5)));
	min-width: calc(2.2 * (0.4rem + var(--font-heading-5)));
	min-height: calc(2.2 * (0.4rem + var(--font-heading-5)));
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition:
		background 0.2s,
		transform 0.2s;
	flex-shrink: 0;
	position: relative;
}

#audio-play-btn span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

#audio-play-btn.play-state span {
	transform: translate(-47%, -50%);
}

#audio-play-btn.pause-state span {
	transform: translate(-50%, -50%);
}

#audio-play-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: scale(1.05);
}

#audio-play-btn:active {
	transform: scale(0.95);
}

/* ========================================
   EN-TÊTE AUDIO
======================================== */

.audio-header-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0.3rem;
}

.audio-title-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1;
	gap: 0.2rem;
}

.audio-label {
	font-size: calc(var(--font-heading-5) * 0.9);
	color: var(--color-white);
	font-family: "Poppins", sans-serif;
	letter-spacing: 0.02em;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
	text-align: left;
}

#audio-logo {
	width: calc(2.2 * (0.4rem + var(--font-heading-5)));
	height: calc(2.2 * (0.4rem + var(--font-heading-5)));
	opacity: 0.8;
	transition:
		opacity 0.3s,
		transform 0.2s,
		background 0.2s;
	flex-shrink: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: visible;
	order: 2;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	position: absolute;
	right: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
}

#audio-logo:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-50%) scale(1.05);
	opacity: 1;
}

#audio-logo:active {
	transform: translateY(-50%) scale(0.95);
}

/* ========================================
   BARRE DE PROGRESSION
======================================== */

.audio-progress-container {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	flex: 1;
	max-width: calc(100% - calc(2.2 * (0.4rem + var(--font-heading-5))) - 0.4rem);
	margin-top: -0.2rem;
}

#audio-progress {
	width: 100%;
	height: 0.2rem;
	margin: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 1rem;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.3s;
	flex-grow: 1;
	-ms-overflow-style: none;
	cursor: pointer;
}

/* Barre remplie (Chrome, Safari, Edge) */
#audio-progress::-webkit-slider-runnable-track {
	height: 0.2rem;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.9) var(--progress, 0%),
		rgba(255, 255, 255, 0.2) var(--progress, 0%)
	);
	border-radius: 1rem;
}

/* Curseur (thumb) Chrome, Safari, Edge */
#audio-progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	border: none;
	cursor: pointer;
	transition:
		background 0.2s,
		box-shadow 0.2s;
	margin-top: -0.25rem;
}

/* Barre remplie (Firefox) */
#audio-progress::-moz-range-track {
	height: 0.4rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 1rem;
}

#audio-progress::-moz-range-progress {
	height: 0.4rem;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 1rem;
}

/* Curseur (thumb) Firefox */
#audio-progress::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	border: none;
	cursor: pointer;
	transition:
		background 0.2s,
		box-shadow 0.2s;
}

/* Curseur (thumb) IE */
#audio-progress::-ms-thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	border: none;
	cursor: pointer;
	transition:
		background 0.2s,
		box-shadow 0.2s;
}

/* Barre remplie (IE) */
#audio-progress::-ms-fill-lower {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 1rem;
}

#audio-progress::-ms-fill-upper {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 1rem;
}

/* États focus et hover */
#audio-progress:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

#audio-progress:focus::-webkit-slider-thumb {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

#audio-progress:focus::-moz-range-thumb {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

#audio-progress:focus::-ms-thumb {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.audio-duration {
	font-size: calc(var(--font-heading-5) * 0.65);
	color: var(--color-white);
	font-family: "Poppins", sans-serif;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 70px;
	text-align: right;
	opacity: 0.9;
}

/* ========================================
   RESPONSIVE : TABLETTE
======================================== */

@media (max-width: 1024px) {
	.presentation-intro-audio-block {
		margin-top: 0.5rem;
	}

	.presentation-intro-audio-inner {
		padding: 0.6rem 1.2rem 0.6rem 0.6rem;
		border-radius: calc(3 * (0.4rem + var(--font-heading-5) * 0.9) / 2);
		gap: 0.8rem;
		height: calc(3 * (0.4rem + var(--font-heading-5) * 0.9));
		min-height: calc(3 * (0.4rem + var(--font-heading-5) * 0.9));
	}

	#audio-play-btn {
		width: calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9));
		height: calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9));
		min-width: calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9));
		min-height: calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9));
		font-size: 1.5rem;
	}

	.audio-header-container {
		gap: 0.4rem;
	}

	.audio-title-row {
		gap: 0.4rem;
	}

	#audio-logo {
		width: calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9));
		height: calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9));
		right: 0.4rem;
	}

	.audio-progress-container {
		max-width: calc(100% - calc(2.2 * (0.4rem + var(--font-heading-5) * 0.9)) - 0.3rem);
		gap: 0.3rem;
	}

	.audio-label {
		font-size: var(--font-heading-5);
	}

	.audio-duration {
		font-size: calc(var(--font-heading-5) * 0.65);
		min-width: 70px;
	}

	.audio-progress-container {
		gap: 0.6rem;
	}
}

/* ========================================
   RESPONSIVE : MOBILE
======================================== */

@media (max-width: 600px) {
	.presentation-intro-audio-block {
		margin-top: 0.4rem;
	}

	.presentation-intro-audio-inner {
		padding: 0.5rem 1rem 0.5rem 0.5rem;
		border-radius: calc(2.5 * (0.4rem + var(--font-heading-5) * 0.8) / 2);
		gap: 0.6rem;
		height: calc(2.5 * (0.4rem + var(--font-heading-5) * 0.8));
		min-height: calc(2.5 * (0.4rem + var(--font-heading-5) * 0.8));
	}

	#audio-play-btn {
		width: calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8));
		height: calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8));
		min-width: calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8));
		min-height: calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8));
		font-size: 1.2rem;
	}

	.audio-header-container {
		gap: 0.3rem;
	}

	.audio-title-row {
		gap: 0.3rem;
	}

	#audio-logo {
		width: calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8));
		height: calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8));
		right: 0.3rem;
	}

	.audio-progress-container {
		max-width: calc(100% - calc(1.8 * (0.4rem + var(--font-heading-5) * 0.8)) - 0.3rem);
		gap: 0.2rem;
	}

	.audio-label {
		font-size: calc(var(--font-heading-5) * 0.9);
	}

	.audio-duration {
		font-size: calc(var(--font-heading-5) * 0.6);
		min-width: 60px;
	}

	.audio-progress-container {
		gap: 0.4rem;
	}

	/* Réduction taille thumb mobile */
	#audio-progress::-webkit-slider-thumb,
	#audio-progress::-moz-range-thumb,
	#audio-progress::-ms-thumb {
		width: 0.8rem;
		height: 0.8rem;
	}

	#audio-progress::-webkit-slider-thumb {
		margin-top: -0.2rem;
	}
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes pulse {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
	}
}