/* ==========================================================================
   Réactions de fin de chapitre
   Cinq pastilles sur une ligne, même sur un téléphone de 360 px : l'emoji
   porte le sens, le nom n'apparaît qu'à partir d'une largeur confortable.
   ========================================================================== */

.ori-reac {
	display: grid;
	justify-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ori-reac-q {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--ori-text-1, #eaf0f7);
}
.ori-reac-choix {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	max-width: 520px;
}
.ori-reac-btn {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 2px;
	min-height: 64px;
	padding: 8px 4px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--ori-text-2, #cfd8e6);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.ori-reac-btn:hover { border-color: rgba(155, 109, 255, 0.5); }
.ori-reac-btn:active { transform: scale(0.94); }
.ori-reac-btn:focus-visible { outline: 2px solid #9b6dff; outline-offset: 2px; }
.ori-reac-btn.est-mien {
	border-color: #9b6dff;
	background: rgba(155, 109, 255, 0.18);
	color: #fff;
}
.ori-reac-emo { font-size: 24px; line-height: 1.1; }
.ori-reac-nom { display: none; font-size: 11.5px; font-weight: 700; }
/* Le compteur est une pastille dans le coin, hors du flux : réservé sous
   l'emoji, son emplacement restait vide tant que personne n'avait réagi et
   repoussait l'emoji vers le haut (10 px au-dessus, 27 en dessous). */
.ori-reac-btn { position: relative; }
.ori-reac-n {
	position: absolute;
	top: 4px;
	right: 5px;
	min-width: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--ori-text-2, #cfd8e6);
}
.ori-reac-n:empty { display: none; }
.ori-reac-btn.est-mien .ori-reac-n { background: #9b6dff; color: #fff; }
.ori-reac-total { margin: 0; font-size: 12.5px; color: var(--ori-muted, #8b97a9); }

.ori-reac-btn.pop .ori-reac-emo { animation: ori-reac-pop 0.42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ori-reac-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.45) rotate(-8deg); }
	100% { transform: scale(1); }
}

@media (min-width: 480px) {
	.ori-reac-nom { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.ori-reac-btn.pop .ori-reac-emo { animation: none; }
	.ori-reac-btn { transition: none; }
}