/**
 * TTS Reader - Widget Complet (fusionné)
 * Theme + Layout + Components + Accessibility
 * 
 * Ordre : Variables → Layout → Composants → Accessibilité
 */

/* ================================================================
   1. THEME — Variables CSS
   ================================================================ */

:root {
	--tts-primary: #4CAF50;
	--tts-primary-dark: #45a049;
	--tts-bg-panel: rgba(20, 20, 20, 0.98);
	--tts-border-primary: rgba(76, 175, 80, 0.3);
	--tts-text-secondary: #b0b0b0;
	--tts-bg-progress: #E0E0E0;
	--tts-font-size-sm: 12px;
	--tts-font-size-base: 14px;
	--tts-radius-sm: 4px;
	--tts-radius-md: 6px;
	--tts-radius-lg: 8px;
}

/* Mode sombre du système */
@media (prefers-color-scheme: dark) {
	.tts-widget {
		--tts-bg-panel: rgba(30, 30, 30, 0.98);
	}
}

/* Mode clair du système */
@media (prefers-color-scheme: light) {
	.tts-widget {
		--tts-bg-panel: rgba(245, 245, 245, 0.95);
	}
}

/* ================================================================
   2. LAYOUT — Structure du widget
   ================================================================ */

/* ── Reset box-sizing ─────────────────────────────────────── */

.tts-widget {
	box-sizing: border-box;
}

.tts-widget,
.tts-widget * {
	box-sizing: inherit;
}

/* ── Widget root : colonne ────────────────────────────────── */

.tts-widget {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── Row 1 : Contrôles (volume | play | options) ─────────── */

.tts-controls-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
}

/* ── Groupes (volume / options) ───────────────────────────── */

.tts-control-group {
	position: relative;
	display: flex;
	align-items: center;
}

/* ── Boutons de contrôle ──────────────────────────────────── */

.tts-control-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	border: none;
	padding: 12px 16px;
	border-radius: var(--tts-radius-md, 6px);
	font-size: var(--tts-font-size-base, 14px);
	transition: transform 0.15s ease, opacity 0.15s ease;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	position: relative;
}

.tts-control-button:hover {
	transform: translateY(-2px);
}

.tts-control-button:active {
	transform: translateY(0);
}

/* ── Panels flottants (survol) ────────────────────────────── */

.tts-control-panel {
	position: absolute;
    width: auto;
	top: 100%;
	background: var(--tts-bg-panel, rgba(20, 20, 20, 0.98));
	border: 1px solid var(--tts-border-primary, rgba(76, 175, 80, 0.3));
	border-radius: var(--tts-radius-lg, 8px);
	padding: 12px 16px;
	min-width: 200px;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	margin-top: 8px;
}

/* Volume : aligné à gauche */
.tts-volume-group .tts-control-panel {
	left: 0;
}

/* Options : aligné à droite */
.tts-options-group .tts-control-panel {
	right: 0;
}

/* ── Volume panel ─────────────────────────────────────────── */

.tts-volume-panel {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 180px;
}

.tts-volume-slider {
	flex: 1;
	min-width: 100px;
}

.tts-volume-value {
	min-width: 40px;
	text-align: right;
	font-size: var(--tts-font-size-sm, 12px);
	color: var(--tts-text-secondary, #b0b0b0);
}

/* ── Options panel ────────────────────────────────────────── */

.tts-option-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.tts-option-item:last-child {
	margin-bottom: 0;
}

.tts-option-label {
	color: var(--tts-primary, #4CAF50);
	font-size: var(--tts-font-size-sm, 12px);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tts-option-control {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tts-option-control input[type="range"] {
	flex: 1;
	min-width: 100px;
}

.tts-option-control span {
	min-width: 40px;
	text-align: right;
	font-size: var(--tts-font-size-sm, 12px);
	color: var(--tts-text-secondary, #b0b0b0);
}

/* ── Row 2 : Barre de progression interactive ─────────────── */

.tts-progress-container {
	width: 100%;
}

.tts-progress-hidden {
	display: none;
}

/* Web Speech API unsupported fallback */
.tts-unsupported {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.tts-progress-bar {
	position: relative;
	width: 100%;
	height: 6px;
	background: var(--tts-bg-progress, rgba(255, 255, 255, 0.15));
	border-radius: 3px;
	cursor: pointer;
	overflow: visible;
	transition: height 0.15s ease;
}

.tts-progress-bar:hover {
	height: 10px;
}

.tts-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--tts-primary, #4CAF50);
	border-radius: 3px;
	width: 0%;
	transition: width 0.1s linear;
	pointer-events: none;
	z-index: 1;
}

/* Section markers (TTS mode — populated by JS) */
.tts-progress-sections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.tts-section-marker {
	position: absolute;
	top: 0;
	width: 2px;
	height: 100%;
	background: var(--tts-border-primary, rgba(76, 175, 80, 0.5));
	transform: translateX(-1px);
	pointer-events: auto;
	cursor: pointer;
}

/* Wider hover zone for tooltips */
.tts-section-marker::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -6px;
	width: 14px;
	height: calc(100% + 8px);
}

/* Hover cursor line */
.tts-progress-cursor {
	position: absolute;
	top: -2px;
	width: 2px;
	height: calc(100% + 4px);
	background: #fff;
	border-radius: 1px;
	display: none;
	pointer-events: none;
	z-index: 3;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
	.tts-control-button {
		padding: 10px 12px;
		font-size: 13px;
	}

	.tts-control-panel {
		min-width: 160px;
		padding: 10px 12px;
	}

	.tts-progress-bar {
		height: 8px;
	}

	.tts-progress-bar:hover {
		height: 12px;
	}
}

/* ================================================================
   3. COMPONENTS — Boutons, inputs, etc.
   ================================================================ */

/* Play Button */
.tts-play-button {
    width: 85%;
	background: #4CAF50;
	color: #FFFFFF;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 6px;
    box-shadow: none;
	transition: all 0.3s ease;
}

.tts-play-button:hover {
	background: #45a049;
}

.tts-play-button[aria-pressed="true"] {
	background: #3d8b40;
}

.tts-play-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
}

/* Volume Button */
.tts-volume-button {
	background-color: rgba(76, 175, 80, 0.15);
	color: #FFFFFF;
	padding: 12px;
	border-radius: 6px;
	font-size: 18px;
	transition: all 0.3s ease;
}

.tts-volume-button:hover {
	background-color: rgba(76, 175, 80, 0.25);
	color: #4CAF50;
}

/* Options Button */
.tts-options-button {
	background-color: rgba(76, 175, 80, 0.15);
	color: #FFFFFF;
	padding: 12px;
	border-radius: 6px;
	font-size: 18px;
	transition: all 0.3s ease;
}

.tts-options-button:hover {
	background-color: rgba(76, 175, 80, 0.25);
	color: #4CAF50;
	transform: rotate(20deg);
}

/* Input Range Slider (scoped to widget) */
.tts-widget input[type="range"] {
	width: 100%;
	height: 6px;
	-webkit-appearance: none;
	appearance: none;
	background: #E0E0E0;
	border-radius: 3px;
	outline: none;
	margin: 8px 0;
	padding: 0;
	border: none;
}

.tts-widget input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--tts-primary, #4CAF50);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
}

.tts-widget input[type="range"]::-webkit-slider-thumb:hover {
	background: var(--tts-primary-dark, #45a049);
	box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
	transform: scale(1.1);
}

.tts-widget input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--tts-primary, #4CAF50);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
}

.tts-widget input[type="range"]::-moz-range-thumb:hover {
	background: var(--tts-primary-dark, #45a049);
	box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
	transform: scale(1.1);
}

.tts-widget input[type="range"]::-moz-range-track {
	background: transparent;
	border: none;
}

.tts-widget input[type="range"]::-moz-range-progress {
	background: var(--tts-primary, #4CAF50);
	border-radius: 3px;
}

/* Icons */
.tts-widget i {
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
}

/* Focus visible — box-shadow approach (immune to Elementor resets) */
.tts-control-button:focus-visible,
.tts-play-button:focus-visible,
.tts-volume-button:focus-visible,
.tts-options-button:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 var(--tts-focus-width, 2px) var(--tts-focus-color, #4CAF50) !important;
	border-radius: var(--tts-radius-md, 6px);
}

.tts-widget input[type="range"]:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 var(--tts-focus-width, 2px) var(--tts-focus-color, #4CAF50) !important;
	border-radius: 3px;
}

/* Keyboard navigation — reinforced focus for tabindex elements */
.tts-control-button[tabindex="0"]:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 var(--tts-focus-width, 3px) var(--tts-focus-color, #4CAF50) !important;
}

/* TTS section currently being read */
.tts-reading-active {
	padding: 6px 10px;
	border-radius: 4px;
	transition: background-color 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease, color 0.3s ease, padding 0.3s ease;
}

/* TTS image zoom during reading */
.tts-reading-active img,
.tts-img-reading {
	transition: transform 0.4s ease;
}

/* TTS word currently being read */
.tts-word {
	display: inline;
	line-height: inherit;
	border-radius: 3px;
	padding: 2px 4px;
	margin: 0 -4px;
	transition: background-color 0.25s ease, font-size 0.25s ease, font-weight 0.25s ease;
}

.tts-word-upcoming {
	transition: background-color 0.15s ease, font-size 0.15s ease, font-weight 0.15s ease;
}

.tts-word-active {
	transition: background-color 0.08s ease, font-size 0.08s ease, font-weight 0.08s ease;
}

.tts-word-fading {
	transition: background-color 0.35s ease 0.1s, font-size 0.35s ease 0.1s, font-weight 0.35s ease 0.1s;
}

/* ── Focus ring (keyboard) pour progress bar ──────────────── */

.tts-progress-bar:focus-visible {
	outline: 2px solid var(--tts-primary, #4CAF50);
	outline-offset: 2px;
}

/* ================================================================
   4. ACCESSIBILITY — WCAG 2.1 A/AA
   ================================================================ */

/* sr-only pour lecteurs d'écran */
.tts-status.sr-only,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Mode contraste élevé (Windows High Contrast) */
@media (prefers-contrast: more) {
	.tts-widget {
		border: 2px solid currentColor;
	}

	.tts-play-button {
		border: 2px solid #FFFFFF;
		font-weight: 700;
	}

	.tts-control-panel {
		border: 2px solid currentColor;
	}

	.tts-progress-bar {
		border: 1px solid currentColor;
	}

	.tts-widget input[type="range"]::-webkit-slider-thumb {
		border: 2px solid #000000;
	}

	.tts-widget input[type="range"]::-moz-range-thumb {
		border: 2px solid #000000;
	}
}

/* Mode réduit motion */
@media (prefers-reduced-motion: reduce) {
	.tts-widget,
	.tts-widget * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Indicators pour État aria-pressed (screen-reader only) */
.tts-play-button[aria-pressed="true"]::after {
	content: " (En-cours)";
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* ARIA label support — scoped to widget */
.tts-widget [role="button"] {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

/* Option pour zoom texte */
@media (min-width: 1920px) {
	.tts-widget {
		font-size: 16px;
	}
}

/* Transition accessible pour message status */
.tts-status[role="status"] {
	transition: none;
}

/* Print styles */
@media print {
	.tts-widget {
		display: none;
	}
}