/**
 * Studio de transcription — styles autonomes du plugin.
 *
 * Portée strictement limitée à .rint-tr : aucune règle
 * globale. Les classes structurelles (card, btn, pill…)
 * sont redéfinies SOUS .rint-tr seulement, avec les
 * variables du standard « Affiche » du site, pour que
 * l’outil garde son apparence sur n’importe quel thème hôte.
 */

.rint-tr {
	--tr-rouge: #e01e26;
	--tr-cyan: #29b6ff;
	--tr-or: #e8b64c;
	--tr-fond: #101014;
	--tr-carte: #17171d;
	--tr-bord: #2c2c35;
	--tr-texte: #f2f0ea;
	--tr-muet: #a9a49a;
	color: var(--tr-texte);
}

.rint-tr .card {
	background: var(--tr-carte);
	border: 1px solid var(--tr-bord);
	border-radius: 16px;
	padding: 20px;
}

.rint-tr .btn {
	display: inline-block;
	border: 1px solid var(--tr-bord);
	background: transparent;
	color: var(--tr-texte);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

.rint-tr .btn-primary {
	background: var(--tr-rouge);
	border-color: var(--tr-rouge);
	color: #fff;
}

.rint-tr .btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.rint-tr .muted { color: var(--tr-muet); }
.rint-tr .small { font-size: 0.85em; }

.rint-tr .pill {
	display: inline-block;
	border: 1px solid var(--tr-cyan);
	color: var(--tr-cyan);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 0.8em;
	font-weight: 700;
}

.rint-tr .pill-connecter {
	border-color: var(--tr-or);
	color: var(--tr-or);
}

.rint-tr .tr-intro { font-size: 1.02em; }

.rint-tr .tr-bloc {
	border: 1px solid var(--tr-bord);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 16px 0;
}

.rint-tr .tr-bloc legend,
.rint-tr .tr-titre { font-weight: 800; }
.rint-tr .tr-sous-titre { margin: 14px 0 6px; }

.rint-tr .tr-types {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rint-tr .tr-type {
	border: 1px solid var(--tr-bord);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
}

.rint-tr .tr-type input { margin-right: 6px; }

.rint-tr .tr-type:has(input:checked) {
	border-color: var(--tr-rouge);
	background: rgba(224, 30, 38, 0.12);
}

.rint-tr .tr-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.rint-tr .tr-source-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.rint-tr audio { width: 100%; margin-top: 10px; }

.rint-tr .tr-voyants { list-style: none; margin: 0; padding: 0; }
.rint-tr .tr-voyants li { padding: 4px 0; }

.rint-tr .voyant {
	display: inline-block;
	min-width: 74px;
	text-align: center;
	border-radius: 999px;
	padding: 1px 8px;
	margin-right: 8px;
	font-size: 0.8em;
	font-weight: 800;
	color: #111;
}

.rint-tr .voyant.bon { background: #58d68a; }
.rint-tr .voyant.moyen { background: var(--tr-or); }
.rint-tr .voyant.mauvais { background: var(--tr-rouge); color: #fff; }

.rint-tr .tr-conseil { margin: 4px 0; color: var(--tr-or); }
.rint-tr .tr-conseil.ok { color: #58d68a; }

.rint-tr .tr-reglages-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.rint-tr .tr-champ { display: block; }
.rint-tr .tr-champ > span { display: block; font-weight: 700; margin-bottom: 4px; }
.rint-tr .tr-champ-case { display: flex; gap: 8px; align-items: flex-start; }
.rint-tr .tr-champ-case > span { font-weight: 400; }

.rint-tr select,
.rint-tr input[type="text"],
.rint-tr textarea {
	background: var(--tr-fond);
	color: var(--tr-texte);
	border: 1px solid var(--tr-bord);
	border-radius: 8px;
	padding: 8px;
	width: 100%;
	box-sizing: border-box;
}

.rint-tr .tr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 10px 0;
}

.rint-tr .tr-actions input[type="text"],
.rint-tr .tr-actions select { width: auto; }

.rint-tr progress { width: 100%; height: 14px; }

.rint-tr .tr-locuteur-ligne {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 6px 0;
}

.rint-tr .tr-locuteur-ligne input { max-width: 260px; }

.rint-tr .tr-segments { display: flex; flex-direction: column; gap: 10px; }

.rint-tr .tr-segment {
	border: 1px solid var(--tr-bord);
	border-radius: 10px;
	padding: 10px 12px;
}

.rint-tr .tr-segment-entete {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
}

.rint-tr .tr-segment-temps {
	font-variant-numeric: tabular-nums;
	color: var(--tr-cyan);
	font-weight: 700;
}

.rint-tr .tr-segment select { width: auto; }
.rint-tr .tr-segment textarea { min-height: 3.2em; }

.rint-tr .tr-segment .tr-peu-audible {
	color: var(--tr-or);
	font-weight: 700;
	font-size: 0.85em;
}

.rint-tr .tr-modifs ul { margin: 6px 0; }

.rint-tr-porte {
	border: 1px solid var(--tr-bord, #2c2c35);
	border-radius: 12px;
	padding: 14px 16px;
}