/**
 * Mike Intonation — styles frontoffice.
 *
 * Les couleurs des tracés canvas passent par des variables CSS : les contrôles
 * de style Elementor les écrivent sur {{WRAPPER}} .mike-intonation, et le JS les
 * relit au moment de dessiner.
 */

.mike-intonation {
	--mi-wave-peak: #E0B8CD;
	--mi-wave-rms: #C14274;
	--mi-wave-bg: #FFFFFF;
	--mi-wave-axis: #E4D8DF;
	--mi-wave-ghost: #4F4A78;
	--mi-pitch-line: #4F4A78;
	--mi-pitch-width: 2.5;
	--mi-pitch-bg: #FFFFFF;
	--mi-pitch-grid: #EDE7F0;
	--mi-pitch-label: #9A93A8;
	--mi-tag-separator: #E4D8DF;

	background-color: #FBF3F7;
	border-radius: 10px;
	padding: 18px;
	box-sizing: border-box;
}

.mike-intonation *,
.mike-intonation *::before,
.mike-intonation *::after {
	box-sizing: inherit;
}

.mike-intonation .mi-empty {
	margin: 0;
	color: #8A8199;
	font-style: italic;
}

.mike-intonation .mi-phrase {
	margin: 0 0 16px;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.35;
	color: #3F3A55;
}

/* Guillemets français posés en CSS : le texte de la phrase reste intact, il sert
   aussi au nom du MP3 téléchargé et aux métadonnées du fichier. */
.mike-intonation .mi-phrase::before {
	content: "«\00a0";
}

.mike-intonation .mi-phrase::after {
	content: "\00a0»";
}

/* ------------------------------------------------------------------ panneaux */

.mike-intonation .mi-panel {
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: 14px 16px 16px;
	margin-bottom: 14px;
}

.mike-intonation .mi-panel:last-of-type {
	margin-bottom: 0;
}

.mike-intonation .mi-panel__title {
	margin: 0 0 10px;
	font-size: 1em;
	font-weight: 600;
	color: #4F4A78;
	line-height: 1.3;
}

.mike-intonation .mi-status {
	display: none;
	margin: 0 0 10px;
	font-size: 0.85em;
	color: #8A8199;
}

.mike-intonation .mi-status.is-visible {
	display: block;
}

.mike-intonation .mi-status.is-error {
	color: #B32D2E;
}

/* ------------------------------------------------------------------ zones repliables */

.mike-intonation .mi-stack {
	position: relative;
}

.mike-intonation .mi-zone {
	border-top: 1px solid #F0E7EE;
}

.mike-intonation .mi-zone:first-child {
	border-top: none;
}

.mike-intonation .mi-zone__summary {
	list-style: none;
	cursor: pointer;
	padding: 7px 0;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #8A8199;
	display: flex;
	align-items: center;
	gap: 6px;
	user-select: none;
}

.mike-intonation .mi-zone__summary::-webkit-details-marker {
	display: none;
}

.mike-intonation .mi-zone__summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.15s ease;
	flex: none;
}

.mike-intonation .mi-zone[open] > .mi-zone__summary::before {
	transform: rotate(90deg);
}

.mike-intonation .mi-zone__summary:focus-visible {
	outline: 2px solid #C14274;
	outline-offset: 2px;
}

.mike-intonation .mi-zone__body {
	padding: 0 0 8px;
}

.mike-intonation .mi-canvas {
	display: block;
	width: 100%;
	border-radius: 4px;
}

.mike-intonation .mi-canvas--wave {
	height: 110px;
}

.mike-intonation .mi-canvas--pitch {
	height: 140px;
}

/* ------------------------------------------------------------------ tags de syllabes */

.mike-intonation .mi-tags {
	position: relative;
	height: 40px;
	/* Laisse la place au badge d'avertissement au-dessus de la rangée. */
	margin-top: 16px;
	border-radius: 4px;
	background-color: var(--mi-wave-bg);
}

.mike-intonation .mi-tag-slot {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	/* Calé à gauche : le tag commence là où la syllabe commence, ce qui se lit
	   plus directement qu'un centrage dans la case. */
	justify-content: flex-start;
	border-left: 1px solid var(--mi-tag-separator);
	padding: 0 2px;
	overflow: hidden;
	min-width: 0;
}

.mike-intonation .mi-tag {
	display: inline-block;
	max-width: 100%;
	/* Marge intérieure en em : elle suit la taille du texte, que celle-ci soit
	   ajustée automatiquement ou fixée dans les réglages. Le total horizontal
	   vaut 1 em, valeur reprise dans le calcul de la taille automatique. */
	padding: 0.22em 0.5em;
	border-radius: 4px;
	background-color: #C14274;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mike-intonation .mi-tag.is-liaison {
	background-color: #FF8F00;
}

.mike-intonation .mi-align-warning {
	position: absolute;
	right: 0;
	top: -16px;
	font-size: 11px;
	color: #B07A00;
	background-color: #FFF6E5;
	border-radius: 3px;
	padding: 1px 6px;
	cursor: help;
}

/* ------------------------------------------------------------------ sélection */

.mike-intonation .mi-selection {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: rgba(193, 66, 116, 0.15);
	border-left: 1px solid rgba(193, 66, 116, 0.55);
	border-right: 1px solid rgba(193, 66, 116, 0.55);
	pointer-events: none;
	z-index: 3;
}

/* Les tracés sont des surfaces de sélection : on tire dessus pour choisir une
   portion. `pan-y` laisse le défilement vertical de la page fonctionner au doigt. */
.mike-intonation .mi-canvas {
	cursor: crosshair;
	touch-action: pan-y;
}

.mike-intonation .mi-tag-slot {
	cursor: pointer;
}

.mike-intonation .mi-tag-slot:focus-visible {
	outline: 2px solid #4F4A78;
	outline-offset: -2px;
	border-radius: 3px;
}

.mike-intonation .mi-tag-slot.is-selected .mi-tag {
	box-shadow: 0 0 0 2px rgba(79, 74, 120, 0.85);
}

/* ------------------------------------------------------------------ barre de lecture */

.mike-intonation .mi-playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background-color: #E00000;
	pointer-events: none;
	z-index: 4;
}

/* ------------------------------------------------------------------ commandes */

.mike-intonation .mi-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.mike-intonation .mi-btn {
	width: 42px;
	height: 42px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: #C14274;
	color: #FFFFFF;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.mike-intonation .mi-btn:hover {
	background-color: #A93765;
}

.mike-intonation .mi-btn:focus-visible {
	outline: 2px solid #4F4A78;
	outline-offset: 2px;
}

.mike-intonation .mi-btn[disabled],
.mike-intonation .mi-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.mike-intonation .mi-btn svg {
	display: block;
}

.mike-intonation .mi-btn--record.is-recording {
	background-color: #E00000;
	animation: mi-pulse 1.4s ease-in-out infinite;
}

@keyframes mi-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(224, 0, 0, 0.45); }
	70%  { box-shadow: 0 0 0 12px rgba(224, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(224, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.mike-intonation .mi-btn--record.is-recording {
		animation: none;
	}
}

/* ------------------------------------------------------------------ interrupteur ralenti */

.mike-intonation .mi-switch {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: 0.85em;
	color: #6B6480;
	user-select: none;
}

.mike-intonation .mi-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.mike-intonation .mi-switch__track {
	width: 38px;
	height: 20px;
	border-radius: 10px;
	background-color: #D9D2E0;
	position: relative;
	transition: background-color 0.15s ease;
	flex: none;
}

.mike-intonation .mi-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #FFFFFF;
	transition: transform 0.15s ease;
}

.mike-intonation .mi-switch input:checked + .mi-switch__track {
	background-color: #FF8F00;
}

.mike-intonation .mi-switch input:checked + .mi-switch__track .mi-switch__thumb {
	transform: translateX(18px);
}

.mike-intonation .mi-switch input:focus-visible + .mi-switch__track {
	outline: 2px solid #4F4A78;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 767px) {
	.mike-intonation {
		padding: 12px;
	}

	.mike-intonation .mi-panel {
		padding: 12px;
	}

	.mike-intonation .mi-canvas--wave {
		height: 80px;
	}

	.mike-intonation .mi-canvas--pitch {
		height: 110px;
	}

	/* Repli pour la taille fixe ; en mode automatique, le calcul tient déjà compte
	   de la largeur réduite de l'écran. */
	.mike-intonation .mi-tag {
		font-size: 12px;
	}

	.mike-intonation .mi-controls {
		gap: 10px;
	}
}

/* ------------------------------------------------------------------ frontières ajustables
   Visibles uniquement dans l'aperçu de l'éditeur Elementor : elles permettent de
   caler chaque syllabe à la souris quand l'alignement automatique se trompe. */

.mike-intonation .mi-boundaries {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 5;
}

.mike-intonation .mi-boundary {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Trait fin, mais zone de préhension large : on vise à la souris sans effort. */
	width: 13px;
	margin-left: -6px;
	cursor: ew-resize;
	pointer-events: auto;
	touch-action: none;
}

.mike-intonation .mi-boundary::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	width: 1px;
	background-color: #4F4A78;
	opacity: 0.55;
}

.mike-intonation .mi-boundary::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 2px;
	width: 9px;
	height: 22px;
	margin-top: -11px;
	border-radius: 3px;
	background-color: #4F4A78;
	opacity: 0.75;
}

.mike-intonation .mi-boundary:hover::before,
.mike-intonation .mi-boundary.is-dragging::before {
	opacity: 1;
	background-color: #FF8F00;
}

.mike-intonation .mi-boundary:hover::after,
.mike-intonation .mi-boundary.is-dragging::after {
	opacity: 1;
	background-color: #FF8F00;
}