/* Modale de statistiques : même langage visuel que le salon, la préparation
   et les paramètres (papier clair, vert/orange et cartes responsive). */

#bouton_stats { display: none; }
#bouton_stats.stats_indisponibles { display: none !important; }
#icone_stats { display: block; width: 100%; height: 100%; }

body.stats_modale_ouverte { overflow: hidden; }

#menu_stats_partie {
	--stats-green-800: #285c22;
	--stats-green-700: #397a2e;
	--stats-green-500: #6ea937;
	--stats-cream: #fffdf7;
	--stats-ink: #273127;
	--stats-muted: #687269;
	--stats-line: #d8dfd4;
	--stats-orange: #e98a08;
	--stats-orange-dark: #b96500;
	position: fixed;
	/* Doit passer devant #victoire (jeu.css: 10010), qui recouvre tout
	   l'ecran juste avant que ce panneau ne s'ouvre ("Statistiques
	   detaillees" depuis l'ecran de victoire) - mais reste sous les toasts
	   globaux (commun.css #toast_connexion/#toast_email_non_verifie:
	   10015/10020, "au-dessus des modales" par conception) et sous la
	   celebration de progression (progression-fin-partie.css: 10500). */
	z-index: 10011;
	inset: 0;
	display: none;
	background: rgba(14, 28, 12, 0.68);
	backdrop-filter: blur(5px);
	font-family: "Comfortaa", sans-serif;
}

#menu_stats_partie,
#menu_stats_partie * { box-sizing: border-box; }

#menu_stats_partie button { font-family: inherit; }

.stats_modale {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1080px, calc(100vw - 40px));
	height: min(730px, calc(100dvh - 40px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, 0.84);
	border-radius: 26px;
	background: #fffefa;
	box-shadow: 0 28px 80px rgba(5, 22, 5, 0.5);
	color: var(--stats-ink);
}

#menu_stats_partie_header {
	position: static;
	flex: none;
	min-height: 88px;
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0;
	padding: 18px 22px;
	border-bottom: 1px solid var(--stats-line);
	background: rgba(255, 253, 247, 0.97);
}

.stats_icone_titre {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: #eaf3dc;
	color: var(--stats-green-700);
}

.stats_icone_titre svg,
#navigation_stats svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.stats_contexte_partie,
.stats_entete_panneau small,
.stats_titre_carte small {
	display: block;
	margin: 0 0 4px;
	color: var(--stats-green-700);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

#menu_stats_partie_title {
	display: block;
	font-family: "Amaranth", sans-serif;
	font-size: 1.8rem;
	line-height: 1;
}

#fermer_menu_stats {
	flex: none;
	width: 42px;
	height: 42px;
	margin: 0 0 0 auto;
	padding: 0;
	border: 1px solid var(--stats-line);
	border-radius: 50%;
	background: white;
	color: var(--stats-muted);
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
}

#fermer_menu_stats:hover,
#fermer_menu_stats:focus-visible { border-color: #aeb9aa; color: var(--stats-ink); }

#menu_stats_partie_corps {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: 225px minmax(0, 1fr);
}

#navigation_stats {
	padding: 15px 12px;
	border-right: 1px solid var(--stats-line);
	background: #f3f6f0;
}

#navigation_stats button {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 38px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	margin: 0 0 5px;
	padding: 11px 10px;
	border: 0;
	border-radius: 13px;
	background: transparent;
	color: var(--stats-ink);
	text-align: left;
	cursor: pointer;
}

#navigation_stats button > i {
	grid-row: 1 / 3;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: rgba(57, 122, 46, 0.09);
	color: var(--stats-green-700);
	font-style: normal;
}

#navigation_stats button:first-child svg path:first-child { fill: currentColor; stroke: none; }
#navigation_stats button:nth-child(2) svg path { fill: none; stroke: currentColor; }
#navigation_stats svg { width: 20px; height: 20px; }
#navigation_stats button b { display: block; font-size: 0.78rem; }
#navigation_stats button small { display: block; margin-top: 3px; color: var(--stats-muted); font-size: 0.57rem; line-height: 1.25; }
#navigation_stats button:hover { background: rgba(255, 255, 255, 0.75); }
#navigation_stats button.actif { background: white; box-shadow: 0 4px 16px rgba(29, 52, 26, 0.09); }
#navigation_stats button.actif::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 4px; background: var(--stats-orange); content: ""; }
#navigation_stats button.actif > i { background: var(--stats-green-700); color: white; }
#navigation_stats button:focus-visible { outline: 3px solid rgba(233, 138, 8, 0.28); outline-offset: 1px; }

#menu_stats_partie_content {
	min-width: 0;
	overflow-y: auto;
	scrollbar-color: #bcc6b8 transparent;
	background: #fcfdfb;
}

.stats_panneau {
	min-height: 100%;
	padding: 23px 28px 28px;
	animation: stats_panneau_entree 0.2s ease;
}

.stats_panneau[hidden] { display: none; }

@keyframes stats_panneau_entree {
	from { opacity: 0; transform: translateY(5px); }
}

.stats_entete_panneau {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.stats_entete_panneau h2 {
	margin: 2px 0 4px;
	color: var(--stats-ink);
	font-family: "Amaranth", sans-serif;
	font-size: 1.55rem;
	line-height: 1.05;
}

.stats_entete_panneau p {
	margin: 0;
	color: var(--stats-muted);
	font-size: 0.68rem;
	line-height: 1.5;
}

.stats_badge_direct,
.stats_badge_securite {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	padding: 7px 10px;
	border-radius: 999px;
	background: #eaf3dc;
	color: var(--stats-green-700);
	font-size: 0.58rem;
	font-weight: 700;
}

.stats_badge_direct i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--stats-green-500);
	box-shadow: 0 0 0 4px rgba(110, 169, 55, 0.16);
	animation: stats_direct 1.8s ease-in-out infinite;
}

@keyframes stats_direct { 50% { opacity: 0.45; transform: scale(0.72); } }

.stats_topbar_tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 14px;
	border: 1px solid var(--stats-line);
	border-radius: 14px;
	background: white;
	box-shadow: 0 3px 11px rgba(29, 52, 26, 0.035);
}

.stats_topbar_tiles > div {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	padding: 11px 15px;
}

.stats_topbar_tiles > div + div::before {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	width: 1px;
	background: var(--stats-line);
	content: "";
}

.stats_topbar_tiles span { color: var(--stats-muted); font-size: 0.58rem; }
.stats_topbar_tiles strong { overflow: hidden; font-family: system-ui, sans-serif; font-size: 0.92rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.stats_topbar_tiles strong small { color: var(--stats-muted); font-size: 0.6rem; font-weight: 600; }

.stats_grille_synthese,
.stats_grille_distribution {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(245px, 0.8fr);
	gap: 14px;
}

.stats_carte,
.stats_grille_metriques article,
.stats_resume_distribution {
	border: 1px solid var(--stats-line);
	border-radius: 16px;
	background: white;
	box-shadow: 0 4px 13px rgba(29, 52, 26, 0.04);
}

.stats_carte { padding: 16px 17px; }

.stats_titre_carte {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
}

.stats_titre_carte h3 {
	margin: 2px 0 0;
	color: var(--stats-ink);
	font-size: 0.86rem;
	line-height: 1.3;
}

.stats_titre_carte > em { color: var(--stats-muted); font-size: 0.56rem; font-style: normal; }
.stats_valeur_avantage { flex: none; color: var(--stats-green-700); font-family: system-ui, sans-serif; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.stats_jauge_libelles {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin: 16px 0 7px;
	font-size: 0.57rem;
	font-weight: 700;
}

.stats_jauge_libelles > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stats_jauge_libelles > span:last-child { justify-content: flex-end; text-align: right; }
.stats_jauge_joueur { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.stats_jauge_separateur { color: var(--stats-muted); font-size: 0.54rem; font-weight: 400; }

.stats_pastille_joueur {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.stats_pastille_joueur_0 { background: #e00605; }
.stats_pastille_joueur_1 { background: #0f69aa; }
.stats_pastille_joueur_2 { background: #397a2e; }
.stats_pastille_joueur_3 { background: #ec9013; }

.stats_jauge_piste {
	position: relative;
	height: 12px;
	overflow: hidden;
	border: 3px solid white;
	border-radius: 99px;
	background: linear-gradient(90deg, #d8ebcf 0 50%, #dcebf5 50%);
	box-shadow: 0 0 0 1px var(--stats-line);
}

.stats_jauge_piste::before { position: absolute; inset: 0 50% 0 0; background: linear-gradient(90deg, rgba(57, 122, 46, 0.86), rgba(110, 169, 55, 0.28)); content: ""; }
.stats_jauge_piste::after { position: absolute; inset: 0 0 0 50%; background: linear-gradient(90deg, rgba(15, 105, 170, 0.25), rgba(15, 105, 170, 0.82)); content: ""; }
.stats_jauge_piste > i { position: absolute; z-index: 2; top: -3px; bottom: -3px; left: 50%; width: 2px; background: white; }
.stats_jauge_curseur { position: absolute; z-index: 3; top: 50%; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--stats-ink); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); }

.stats_jauge_point_de_vue { display: flex; justify-content: space-between; margin-top: 6px; color: #8c958b; font-size: 0.46rem; letter-spacing: 0.06em; }
.stats_entete_graphique { display: flex; justify-content: space-between; margin: 15px 0 5px; font-size: 0.59rem; font-weight: 700; }
.stats_entete_graphique small { color: var(--stats-muted); font-weight: 400; }

.stats_graphique {
	position: relative;
	height: 164px;
	min-height: 0;
	overflow: hidden;
	border: 1px solid #e4e9e1;
	border-radius: 11px;
	background: #fbfcfa;
}

.stats_graphique canvas { width: 100% !important; height: 100% !important; }

.stats_faits { display: flex; flex-direction: column; }
.stats_faits ul { flex: 1; margin: 11px 0 8px; padding: 0; list-style: none; }
.stats_faits li { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid #e8ece5; }
.stats_fait_icone,
.stats_metrique_icone {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	font-size: 0.95rem;
	font-style: normal;
	font-weight: 700;
}

.stats_fait_icone.vert,
.stats_metrique_icone.vert { background: #eaf3dc; color: var(--stats-green-700); }
.stats_fait_icone.orange,
.stats_metrique_icone.orange { background: #fff0d7; color: #c36b00; }
.stats_fait_icone.bleu,
.stats_metrique_icone.bleu { background: #e1f2f8; color: #2682a1; }
.stats_faits li strong { display: block; margin: 1px 0 3px; font-size: 0.66rem; }
.stats_faits li p { margin: 0; color: var(--stats-muted); font-size: 0.55rem; line-height: 1.45; }

.stats_voir_details {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 11px;
	border: 0;
	border-radius: 10px;
	background: #f1f5ed;
	color: var(--stats-green-700);
	font-size: 0.58rem;
	font-weight: 700;
	cursor: pointer;
}

.stats_voir_details:hover { background: #e7efdf; }

.stats_carte_attente { display: flex; flex-direction: column; justify-content: center; min-height: 160px; text-align: center; }
.stats_carte_attente strong { font-size: 0.84rem; }
.stats_carte_attente p,
.stats_note { margin: 7px 0 0; color: var(--stats-muted); font-size: 0.62rem; line-height: 1.5; }

.stats_grille_metriques {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 14px;
}

.stats_grille_metriques article { display: flex; align-items: center; gap: 11px; padding: 13px; }
.stats_grille_metriques div { min-width: 0; }
.stats_grille_metriques small,
.stats_grille_metriques strong,
.stats_grille_metriques em { display: block; }
.stats_grille_metriques small { color: var(--stats-muted); font-size: 0.53rem; }
.stats_grille_metriques strong { margin: 2px 0; font-family: system-ui, sans-serif; font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stats_grille_metriques em { overflow: hidden; color: var(--stats-green-700); font-size: 0.48rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.stats_comparaison { padding-bottom: 14px; }
.stats_legende_joueurs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 10px; max-width: 360px; }
.stats_legende_joueurs span { display: flex; align-items: center; gap: 4px; color: var(--stats-muted); font-size: 0.49rem; }
.stats_table_scroll { overflow-x: auto; }
.stats_table_comparaison { min-width: 680px; margin-top: 14px; border: 1px solid #e1e6de; border-radius: 11px; overflow: hidden; }
.stats_table_entete,
.stats_table_ligne { display: grid; grid-template-columns: minmax(145px, 1.35fr) repeat(4, 1fr); }
.stats_table_entete { background: #f1f4ef; color: var(--stats-muted); font-size: 0.48rem; font-weight: 700; }
.stats_table_entete span,
.stats_table_ligne > * { min-width: 0; padding: 9px 10px; text-align: center; }
.stats_table_entete span:first-child,
.stats_table_ligne > strong { text-align: left; }
.stats_table_ligne + .stats_table_ligne { border-top: 1px solid #e8ece5; }
.stats_table_ligne > strong { align-self: center; font-size: 0.58rem; }
.stats_table_ligne > span { position: relative; background: linear-gradient(to top, rgba(241, 244, 239, 0.52), transparent); font-family: system-ui, sans-serif; font-size: 0.63rem; font-variant-numeric: tabular-nums; }
.stats_table_ligne > span.stats_cellule_moi { background-color: #f3f8ee; }
.stats_table_ligne b { position: relative; z-index: 1; display: inline-block; font-weight: 700; }
.stats_table_ligne b::after { position: absolute; z-index: -1; bottom: -6px; left: 50%; width: 34px; height: 3px; border-radius: 5px; content: ""; opacity: 0.72; transform: translateX(-50%) scaleX(var(--stats-bar)); }
.stats_barre_joueur_0::after { background: #e00605; }
.stats_barre_joueur_1::after { background: #0f69aa; }
.stats_barre_joueur_2::after { background: #397a2e; }
.stats_barre_joueur_3::after { background: #ec9013; }

.stats_resume_distribution {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 20px;
	margin-bottom: 14px;
	padding: 15px 18px;
	border-left: 5px solid #aeb8aa;
	background: linear-gradient(100deg, #f4f6f2, white 65%);
}

.stats_resume_distribution.distribution_niveau_tres_favorable,
.stats_resume_distribution.distribution_niveau_favorable { border-left-color: var(--stats-green-500); background: linear-gradient(100deg, #f4f9ec, white 65%); }
.stats_resume_distribution.distribution_niveau_defavorable,
.stats_resume_distribution.distribution_niveau_tres_defavorable { border-left-color: #d26761; background: linear-gradient(100deg, #fff5f2, white 65%); }

.stats_verdict_distribution { display: flex; align-items: center; gap: 13px; }
.stats_verdict_distribution > i { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #e3f0d2; color: var(--stats-green-700); font-family: Georgia, serif; font-size: 1.25rem; font-style: normal; }
.distribution_niveau_defavorable .stats_verdict_distribution > i,
.distribution_niveau_tres_defavorable .stats_verdict_distribution > i { background: #f8e4e1; color: #b4423b; }
.stats_verdict_distribution small { color: var(--stats-green-700); font-size: 0.5rem; font-weight: 700; text-transform: uppercase; }
.stats_verdict_distribution h3 { margin: 2px 0 3px; font-size: 0.88rem; }
.stats_verdict_distribution p { margin: 0; color: var(--stats-muted); font-size: 0.56rem; }

.stats_scores_distribution { display: flex; align-items: center; gap: 9px; }
.stats_scores_distribution > div { min-width: 78px; text-align: center; }
.stats_scores_distribution > div span,
.stats_scores_distribution > div strong { display: block; }
.stats_scores_distribution > div span { color: var(--stats-muted); font-size: 0.46rem; }
.stats_scores_distribution > div strong { margin-top: 2px; font-family: system-ui, sans-serif; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.stats_scores_distribution strong small { color: var(--stats-muted); font-size: 0.52rem; }
.stats_scores_distribution > i { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--stats-green-500) var(--stats-score), #dce6d8 0); font-style: normal; }
.stats_scores_distribution > i::before { position: absolute; inset: 5px; border-radius: 50%; background: white; content: ""; }
.stats_scores_distribution > i span { position: relative; color: var(--stats-green-700); font-family: system-ui, sans-serif; font-size: 0.55rem; font-weight: 700; }
.stats_ecart_distribution { grid-column: 1 / -1; margin: 2px 0 0 55px; color: var(--stats-muted); font-size: 0.53rem; }

.stats_grille_distribution { grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr); }
.stats_carte_distribution { min-width: 0; }
.stats_table_distribution { margin-top: 12px; border: 1px solid #e2e7df; border-radius: 11px; overflow: hidden; }
.stats_table_distribution_entete,
.stats_table_distribution > div { display: grid; grid-template-columns: 1.3fr repeat(3, 0.75fr); align-items: center; min-height: 34px; }
.stats_table_distribution > div + div { border-top: 1px solid #edf0eb; }
.stats_table_distribution_entete { background: #f1f4ef; color: var(--stats-muted); font-size: 0.48rem; font-weight: 700; }
.stats_table_distribution span,
.stats_table_distribution em { text-align: center; }
.stats_table_distribution > div > * { padding: 5px 10px; }
.stats_table_distribution > div:not(.stats_table_distribution_entete) { font-family: system-ui, sans-serif; font-size: 0.58rem; font-variant-numeric: tabular-nums; }
.stats_table_distribution b { justify-self: start; min-width: 30px; border: 1px solid #cfd5cc; border-radius: 5px; background: #fff; color: #202420; font-family: Georgia, serif; font-size: 0.66rem; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
.stats_table_distribution em,
.stats_donne_ligne em { color: var(--stats-muted); font-style: normal; font-weight: 700; }
.stats_table_distribution em.positif,
.stats_donne_ligne em.positif { color: var(--stats-green-700); }
.stats_table_distribution em.negatif,
.stats_donne_ligne em.negatif { color: #b4423b; }

.stats_liste_donnes { margin-top: 9px; }
.stats_donne_ligne {
	width: 100%;
	display: grid;
	grid-template-columns: 31px 1fr auto auto;
	align-items: center;
	gap: 9px;
	margin: 0 0 8px;
	padding: 10px;
	border: 1px solid #e1e6de;
	border-radius: 11px;
	background: white;
	color: var(--stats-ink);
	text-align: left;
	cursor: pointer;
}

.stats_donne_ligne:hover { border-color: #a9c888; background: #fbfdf9; }
.stats_donne_ligne > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #edf3e8; color: var(--stats-green-700); font-family: system-ui, sans-serif; font-size: 0.67rem; font-weight: 700; }
.stats_donne_ligne strong,
.stats_donne_ligne small { display: block; }
.stats_donne_ligne strong { font-size: 0.61rem; }
.stats_donne_ligne small { margin-top: 3px; color: var(--stats-muted); font-size: 0.48rem; }
.stats_donne_ligne em { font-size: 0.52rem; }
.stats_donne_ligne > i { color: #99a198; font-size: 1rem; font-style: normal; transition: transform 0.16s ease; }
.stats_donne_ligne.ouverte > i { transform: rotate(90deg); }
.stats_donne_detail { margin: -2px 0 8px; padding: 7px 10px; border-radius: 10px; background: #f6f8f4; }
.stats_donne_detail[hidden] { display: none; }
.stats_donne_en_cours { margin-top: 10px; padding: 10px 11px; border-radius: 10px; background: #f1f3ef; }
.stats_donne_en_cours span { display: flex; align-items: center; gap: 6px; font-size: 0.55rem; font-weight: 700; }
.stats_donne_en_cours span i { width: 7px; height: 7px; border-radius: 50%; background: var(--stats-orange); }
.stats_donne_en_cours small { display: block; margin-top: 4px; color: var(--stats-muted); font-size: 0.47rem; line-height: 1.4; }

.stats_distribution_joueurs { margin-top: 14px; }
.distribution_table { width: 100%; border-collapse: collapse; color: var(--stats-ink); font-size: 0.58rem; }
.distribution_table th,
.distribution_table td { padding: 8px 10px; border-bottom: 1px solid #e7ebe4; text-align: right; white-space: nowrap; }
.distribution_table th:first-child,
.distribution_table td:first-child { text-align: left; }
.distribution_table th { background: #f1f4ef; color: var(--stats-muted); font-weight: 700; }
.distribution_table tr:last-child td { border-bottom: 0; }
.distribution_table .stats_pastille_joueur { margin-right: 6px; }
.distribution_table .stats_ligne_moi { background: #f3f8ee; font-weight: 700; }
.distribution_table_detail { font-size: 0.54rem; }

.stats_attente_distribution { min-height: 190px; flex-direction: row; align-items: center; gap: 14px; text-align: left; }
.stats_attente_distribution > i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: #eaf3dc; color: var(--stats-green-700); font-family: Georgia, serif; font-size: 1.3rem; font-style: normal; }

#menu_stats_partie_footer {
	flex: none;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 22px;
	border-top: 1px solid var(--stats-line);
	background: var(--stats-cream);
}

#menu_stats_partie_footer > span { color: var(--stats-muted); font-size: 0.58rem; }
#menu_stats_partie_footer > span i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--stats-green-500); }

#terminer_stats {
	width: auto;
	margin: 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(#ef9b1d, #df7d00);
	color: white;
	font-size: 0.7rem;
	font-weight: 700;
	box-shadow: 0 4px 0 var(--stats-orange-dark);
	cursor: pointer;
}

#terminer_stats:hover { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
	#menu_stats_partie *,
	#menu_stats_partie *::before,
	#menu_stats_partie *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* CPT-95 : onglet Récompenses (XP/TocFlouz/classement de fin de partie). */

.recomp_resultat {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}

.recomp_resultat strong {
	color: var(--stats-green-700);
	font-family: "Amaranth", sans-serif;
	font-size: 1.3rem;
}

.recomp_resultat span { color: var(--stats-muted); font-size: 0.68rem; }

.recomp_grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.recomp_carte .stats_titre_carte h3 { color: var(--stats-orange-dark); font-size: 1.1rem; }
.recomp_nouveau_total { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--stats-line); font-size: 0.68rem; }
.recomp_nouveau_total strong { color: var(--stats-ink); }

.recomp_bonus_liste { margin: 8px 0 0; padding: 0; list-style: none; }
.recomp_bonus_liste li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 16px;
	color: var(--stats-ink);
	font-size: 0.68rem;
	line-height: 1.4;
}
.recomp_bonus_liste li::before { position: absolute; left: 0; content: "+"; color: var(--stats-green-700); font-weight: 700; }

/* "Détail" (label) + "Comment ce total a été calculé" (titre) sur une seule
   ligne quand la largeur le permet, plutôt que le petit label toujours forcé
   au-dessus comme sur les cartes de gain (.stats_titre_carte small est
   display:block par défaut) - ici les deux forment une seule phrase de
   lecture, pas un couple libellé/valeur. */
.recomp_detail_calcul .stats_titre_carte > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.recomp_detail_calcul .stats_titre_carte small { display: inline; margin: 0; }
.recomp_detail_calcul .stats_titre_carte h3 { margin: 0; }

.recomp_lien_aide { margin-top: 10px; }
.recomp_lien_aide a { color: var(--stats-green-700); font-weight: 700; text-decoration: none; }
.recomp_lien_aide a:hover, .recomp_lien_aide a:focus-visible { text-decoration: underline; }
.recomp_lien_aide i { font-size: 0.55rem; }

@media (max-width: 700px) {
	.stats_modale { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 22px; }
	#menu_stats_partie_header { min-height: 76px; padding: 14px 15px; }
	.stats_icone_titre { width: 40px; height: 40px; }
	#menu_stats_partie_title { font-size: 1.5rem; }
	#menu_stats_partie_corps { display: flex; flex-direction: column; }
	#navigation_stats { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 9px; border-right: 0; border-bottom: 1px solid var(--stats-line); scrollbar-width: none; }
	#navigation_stats button { flex: 1 0 86px; width: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 6px; text-align: center; }
	#navigation_stats button > i { width: 30px; height: 30px; }
	#navigation_stats svg { width: 17px; height: 17px; }
	#navigation_stats button small { display: none; }
	#navigation_stats button b { font-size: 0.56rem; }
	#navigation_stats button.actif::before { top: auto; right: 12px; bottom: 0; left: 12px; width: auto; height: 3px; }
	.stats_panneau { padding: 18px 15px 22px; }
	.stats_entete_panneau { margin-bottom: 14px; }
	.stats_entete_panneau h2 { font-size: 1.4rem; }
	.stats_entete_panneau p { font-size: 0.64rem; }
	.stats_badge_direct,
	.stats_badge_securite { display: none; }
	.stats_topbar_tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.stats_topbar_tiles > div { flex-direction: column-reverse; gap: 3px; padding: 9px 5px; }
	.stats_topbar_tiles span { font-size: 0.48rem; }
	.stats_grille_synthese,
	.stats_grille_distribution { grid-template-columns: 1fr; }
	.stats_carte { padding: 14px; }
	.stats_graphique { height: 145px; }
	.stats_grille_metriques { grid-template-columns: 1fr; gap: 8px; }
	.stats_grille_metriques article { padding: 10px 12px; }
	.stats_grille_metriques strong { font-size: 1.05rem; }
	.stats_legende_joueurs { display: none; }
	.stats_table_comparaison { min-width: 610px; }
	.stats_resume_distribution { grid-template-columns: 1fr; padding: 14px; }
	.stats_scores_distribution { justify-content: center; padding-top: 10px; border-top: 1px solid #dbe5d5; }
	.stats_ecart_distribution { margin-left: 0; text-align: center; }
	#menu_stats_partie_footer { min-height: 60px; padding: 9px 14px; }
	#menu_stats_partie_footer > span { max-width: 170px; line-height: 1.35; }
}

@media (max-width: 440px) {
	#navigation_stats button { flex-grow: 0; }
	#menu_stats_partie_footer > span { max-width: 135px; font-size: 0.52rem; }
	#terminer_stats { padding-inline: 14px; }
	.stats_jauge_libelles { font-size: 0.51rem; }
}
