/**
 * RadioInternet Assistant du visiteur — styles (v2.10.0).
 *
 * Design « Affiche » du site : fond noir profond, néon
 * rouge ON AIR, cyan électrique. Position : bas à
 * GAUCHE, au-dessus de la barre radio persistante
 * (#lp-barre, z-index 9990) — le décalage bas exact est
 * posé par le script (hauteur de barre + dock vidéo
 * visible); le z-index propre 9970 reste SOUS la barre
 * (9990) et SOUS le dock vidéo (9985) : en cas de
 * doute, ce sont eux qui gagnent, jamais l’assistant.
 */

.rint-av {
	position: fixed;
	left: 16px;
	bottom: 124px; /* repli statique : au-dessus de la barre; le script affine */
	z-index: 9970;
	font-family: inherit;
	color: #fff;
}

.rint-av-bulle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 2px solid #ff2d55;
	border-radius: 999px;
	background: #0a0a12;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 0 14px rgba(255, 45, 85, 0.55), 0 6px 18px rgba(0, 0, 0, 0.55);
}

.rint-av-bulle:hover,
.rint-av-bulle:focus-visible {
	border-color: #37c8f5;
	box-shadow: 0 0 14px rgba(55, 200, 245, 0.6), 0 6px 18px rgba(0, 0, 0, 0.55);
	outline: none;
}

.rint-av-bulle-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ff2d55;
	color: #fff;
	font-weight: 900;
}

.rint-av-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #37c8f5;
	color: #04121a;
	font-size: 12px;
	font-weight: 800;
}

.rint-av-panneau {
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	width: 340px;
	max-width: calc(100vw - 32px);
	max-height: min(62vh, 540px);
	display: flex;
	flex-direction: column;
	background: #0a0a12;
	border: 2px solid #ff2d55;
	border-radius: 14px;
	box-shadow: 0 0 18px rgba(255, 45, 85, 0.45), 0 14px 34px rgba(0, 0, 0, 0.65);
	overflow: hidden;
}

.rint-av-panneau[hidden] {
	display: none;
}

.rint-av-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: #12121e;
	border-bottom: 1px solid rgba(55, 200, 245, 0.35);
}

.rint-av-titre {
	color: #37c8f5;
	font-size: 15px;
	letter-spacing: 0.02em;
}

.rint-av-petit-bouton {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	background: transparent;
	color: #fff;
	width: 28px;
	height: 28px;
	cursor: pointer;
	line-height: 1;
}

.rint-av-petit-bouton:hover {
	border-color: #ff2d55;
	color: #ff2d55;
}

.rint-av-messages {
	padding: 12px 14px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rint-av-msg {
	padding: 8px 11px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.rint-av-msg-assistant {
	background: #171726;
	border: 1px solid rgba(55, 200, 245, 0.3);
	align-self: flex-start;
}

.rint-av-msg-visiteur {
	background: #2a0f18;
	border: 1px solid rgba(255, 45, 85, 0.45);
	align-self: flex-end;
}

.rint-av-msg-correction {
	background: #2a0f18;
	border: 1px solid #ff2d55;
	color: #ffd7de;
	align-self: flex-start;
}

.rint-av-msg a {
	color: #37c8f5;
	text-decoration: underline;
}

.rint-av-bouton-guide {
	padding: 7px 12px;
	border: 1px solid #37c8f5;
	border-radius: 999px;
	background: transparent;
	color: #37c8f5;
	font-weight: 700;
	cursor: pointer;
}

.rint-av-bouton-guide:hover:not(:disabled) {
	background: #37c8f5;
	color: #04121a;
}

.rint-av-bouton-guide:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Questions par page (v2.10.0) : les pastilles des
 * questions d’aide de la page courante, proposées à
 * l’ouverture du panneau. */
.rint-av-suggestions {
	margin: 4px 0 8px;
}

.rint-av-suggestions-titre {
	margin: 0 0 6px;
	font-size: 0.85em;
	opacity: 0.85;
}

.rint-av-suggestion {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 6px 11px;
	border: 1px solid #37c8f5;
	border-radius: 999px;
	background: transparent;
	color: #37c8f5;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.rint-av-suggestion:hover,
.rint-av-suggestion:focus-visible {
	background: #37c8f5;
	color: #04121a;
}

.rint-av-form-question {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid rgba(55, 200, 245, 0.35);
	background: #12121e;
}

.rint-av-champ-question {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	background: #0a0a12;
	color: #fff;
	font-size: 14px;
}

.rint-av-envoyer {
	padding: 8px 14px;
	border: none;
	border-radius: 8px;
	background: #ff2d55;
	color: #fff;
	font-weight: 800;
	cursor: pointer;
}

.rint-av-compteur {
	margin: 0;
	padding: 6px 14px 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	background: #12121e;
}

/* ============ Personnage (v2.0.0) ============
 * Le visage est un SVG composé dans le navigateur
 * (module Personnage) : la bouche (groupe
 * .rint-av-bouche du SVG) s’anime seulement quand
 * le conteneur porte la classe « parle », posée
 * par l’adaptateur vocal sur l’état RÉEL de
 * l’énoncé (début/fin d’utterance) — jamais sur
 * une minuterie. */

.rint-av-visage {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.rint-av-visage .rint-av-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rint-av-visage-tete {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #171726;
	border: 1px solid rgba(55, 200, 245, 0.4);
}

.rint-av-visage-atelier {
	width: 132px;
	height: 132px;
	margin: 2px auto;
	border-radius: 16px;
	overflow: hidden;
	background: #171726;
	border: 1px solid rgba(55, 200, 245, 0.35);
}

.rint-av-visage.parle .rint-av-bouche {
	animation: rint-av-bouche-parle 0.26s ease-in-out infinite alternate;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes rint-av-bouche-parle {
	from {
		transform: scaleY(0.55);
	}
	to {
		transform: scaleY(1.35);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rint-av-visage.parle .rint-av-bouche {
		animation: none;
	}
}

.rint-av-perso-nom {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rint-av-atelier {
	border-top: 1px solid rgba(55, 200, 245, 0.35);
	background: #0d0d17;
	padding: 10px 12px 12px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rint-av-atelier[hidden] {
	display: none;
}

.rint-av-atelier-titre {
	margin: 2px 0 0;
	font-weight: 800;
	font-size: 13.5px;
	color: #37c8f5;
	letter-spacing: 0.02em;
}

.rint-av-atelier-champ {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.8);
}

.rint-av-atelier-champ select,
.rint-av-atelier-champ input[type="text"],
.rint-av-atelier-champ input[type="number"] {
	padding: 6px 8px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	background: #0a0a12;
	color: #fff;
	font-size: 13.5px;
	width: 100%;
	box-sizing: border-box;
}

.rint-av-atelier-champ input[type="range"] {
	width: 100%;
	accent-color: #ff2d55;
}

.rint-av-atelier-traits {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	padding: 6px 10px 8px;
	margin: 0;
}

.rint-av-atelier-traits legend {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.8);
	padding: 0 4px;
}

.rint-av-atelier-trait {
	display: inline-block;
	margin: 2px 10px 2px 0;
	font-size: 13px;
	color: #fff;
	cursor: pointer;
}

.rint-av-atelier-case {
	font-size: 13px;
	color: #fff;
	cursor: pointer;
}

.rint-av-atelier-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.rint-av-atelier-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
}

/* Progression par l’usage (v2.1.0) : badge de
 * version du visiteur, barre d’avancement vers le
 * prochain palier, table des points et gains par
 * version — même design « Affiche » que l’atelier.
 * Les options non débloquées des listes paraissent
 * grisées (le navigateur les rend en plus non
 * sélectionnables via l’attribut disabled). */
.rint-av-progression {
	border-top: 1px dashed rgba(255, 255, 255, 0.25);
	margin-top: 4px;
	padding-top: 8px;
}

.rint-av-prog-ligne {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.85);
}

.rint-av-prog-badge {
	background: #ff2d55;
	color: #fff;
	border-radius: 999px;
	padding: 2px 10px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.rint-av-prog-barre {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
	margin: 0 0 8px;
}

.rint-av-prog-rempli {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff2d55, #37c8f5);
	transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.rint-av-prog-rempli {
		transition: none;
	}
}

.rint-av-prog-actions,
.rint-av-prog-versions,
.rint-av-paliers {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}

/* Les versions (v2.3.0) : le tableau complet des
 * paliers dans l’atelier — la ligne ACTUELLE porte
 * la couleur du badge de version, les lignes
 * ATTEINTES restent lisibles, les lignes À VENIR
 * sont grisées comme les options verrouillées. */
.rint-av-palier-actuelle {
	color: #fff;
	font-weight: 700;
	border-left: 3px solid #ff2d55;
	padding-left: 7px;
}

.rint-av-palier-atteinte {
	color: rgba(255, 255, 255, 0.8);
}

.rint-av-palier-a-venir {
	color: #8a8a96;
}

.rint-av-atelier select option:disabled {
	color: #8a8a96;
}

/* Tout recommencer (v2.5.0) : l’état ARMÉ du bouton
 * de remise à zéro — la seule règle nouvelle de
 * cette version, parce que l’état armé (en attente
 * de confirmation) doit se VOIR : le bouton passe
 * aux couleurs d’alerte du design « Affiche » (le
 * rouge néon de la bulle et des corrections), pour
 * que le visiteur sache qu’un second clic efface
 * définitivement son personnage et sa progression
 * sur cet appareil. */
.rint-av-bouton-guide.rint-av-arme {
	border-color: #ff2d55;
	background: #ff2d55;
	color: #fff;
}

/* Message de correction sous un champ surveillé :
 * rouge néon sur fond sombre, visible immédiatement. */
.rint-av-aide {
	margin: 6px 0 2px;
	padding: 8px 11px;
	border: 1px solid #ff2d55;
	border-radius: 8px;
	background: #2a0f18;
	color: #ffd7de;
	font-size: 13.5px;
	line-height: 1.45;
}

@media (max-width: 640px) {
	.rint-av {
		left: 8px;
		bottom: 98px; /* repli mobile : barre plus basse; le script affine */
	}

	.rint-av-panneau {
		width: calc(100vw - 16px);
		max-height: 58vh;
	}

	.rint-av-bulle-libelle {
		display: none; /* pastille icône seule sur petit écran */
	}
}