/* =========================
   BALISES DE BEAT  <1>, <2>, ...
========================= */

/*
	La coloration passe par la CSS Custom Highlight API : elle ne
	touche pas au DOM, ce qui est indispensable dans l'éditeur
	(contenteditable). Sans support navigateur, les balises restent
	du texte brut mais le survol continue de fonctionner.

	Trois calques : la syntaxe brute de l'éditeur, le libellé du
	panneau public, et la balise sous le curseur (par-dessus les
	deux autres, via la priorité posée dans BeatTags.js).
*/

/* éditeur : <1> est une SYNTAXE, elle se signale comme telle */
::highlight(beat-tag) {
	background-color: #2563eb;
	color: #ffffff;
}

/*
	Panneau public : la balise se lit « Tps 1 » et se comporte
	comme un lien — survol = aperçu de la vidéo, clic = la vidéo s'y
	place. Elle en prend donc l'allure plutôt que la pastille pleine
	de l'éditeur, qui ne promettait rien à cliquer. Couleurs prévues
	pour le fond sombre du panneau (voir --v-accent dans style.css) :
	ce calque n'est posé que là.
*/
::highlight(beat-tag-label) {
	color: #93c5fd;

	text-decoration-line: underline;
	text-decoration-color: rgba(147, 197, 253, 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/*
	Sous le curseur, des deux côtés : le lien s'allume. Un fond
	translucide plutôt qu'une pastille pleine — la balise reste un
	morceau de phrase, elle signale seulement qu'elle est active.
*/
::highlight(beat-tag-hover) {
	background-color: rgba(59, 130, 246, 0.35);
	color: #ffffff;

	text-decoration-color: #bfdbfe;
}

/*
	Le curseur ne se pose pas depuis ::highlight() : il vient du
	conteneur, que BeatTags marque tant qu'une balise est survolée.
	« help » pour la syntaxe de l'éditeur, « pointer » là où la
	balise se donne pour un lien.
*/
.beat-tag-hovered {
	cursor: help;
}

.beat-tag-labels.beat-tag-hovered {
	cursor: pointer;
}

/* aide de saisie (éditeur admin) */
.beat-tag-hint {
	margin: 0 0 10px;

	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
}

.beat-tag-hint code {
	padding: 1px 4px;

	background: #eef2ff;
	border-radius: 3px;

	font-size: 12px;
	color: #1d4ed8;
}

/* =========================
   APERÇU FLOTTANT
========================= */

.beat-tag-tip {
	position: fixed;
	z-index: 5000;

	width: 260px;
	padding: 8px;

	background: rgba(2, 6, 23, 0.96);
	border: 1px solid #334155;
	border-radius: 8px;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

	pointer-events: none;
}

.beat-tag-tip.hidden {
	display: none;
}

.beat-tag-tip-video {
	display: block;

	width: 100%;
	border-radius: 5px;

	background: #000000;
}

.beat-tag-tip-video.hidden {
	display: none;
}

.beat-tag-tip-message {
	padding: 14px 6px;

	font-size: 13px;
	color: #fca5a5;
	text-align: center;
}

.beat-tag-tip-message.hidden {
	display: none;
}

.beat-tag-tip-label {
	margin-top: 6px;

	font-size: 13px;
	font-weight: 600;
	color: #e2e8f0;
	text-align: center;
}