/*!
 * Copyright (c) 2024-2026 Entreprises Miron & Co. All rights reserved.
 * Mon Académie — Dashboard élève AcadémieCo
 * v3.82.0 — Apple Monochrome + Gamified Accents (aligned with aca-shared-tokens v1.90.0)
 */

.ma-root {
	/* ─── Tokens (Apple Monochrome — aca-shared-tokens v1.90.0) ─── */
	--aca-bg-deep:     #f5f5f7;
	--aca-bg-1:        #f5f5f7;
	--aca-bg-2:        #ffffff;
	--aca-border:      rgba(0, 0, 0, 0.08);

	--aca-pink:        #ff2d87;
	--aca-pink-glow:   rgba(255, 45, 135, 0.12);
	--aca-blue:        #0071e3;
	--aca-blue-2:      #0077ed;
	--aca-yellow:      #ffcc00;
	--aca-yellow-glow: rgba(255, 204, 0, 0.15);
	--aca-cyan:        #00b8c4;
	--aca-cyan-glow:   rgba(0, 184, 196, 0.12);
	--aca-purple:      #af52de;
	--aca-purple-glow: rgba(175, 82, 222, 0.12);
	--aca-green:       #34c759;
	--aca-green-glow:  rgba(52, 199, 89, 0.12);

	--aca-text:        #1d1d1f;
	--aca-text-dim:    #515154;
	--aca-text-muted:  #86868b;

	--aca-radius:      18px;
	--aca-radius-sm:   12px;
	--aca-font:        -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
	--aca-motion-fast: 120ms;
	--aca-motion-base: 200ms;

	/* ─── v3.79.0 — Card tokens (Apple Monochrome, consomme aca-shared-tokens).
	   Commerce-3 peut désactiver son override CSS temporaire v1.95.0. ─── */
	--aca-card-bg:           #ffffff;
	--aca-card-bg-hover:     #fafafa;
	--aca-card-bg-elevated:  #ffffff;
	--aca-card-border:       1px solid rgba(0, 0, 0, 0.06);
	--aca-card-border-hover: 1px solid rgba(0, 0, 0, 0.12);
	--aca-card-radius:       12px;
	--aca-card-radius-lg:    18px;
	--aca-card-padding:      14px 16px;
	--aca-card-padding-sm:   12px 14px;
	--aca-card-padding-lg:   16px 18px;
	--aca-card-gap:          12px;
	--aca-card-transition:   background var(--aca-motion-base) ease,
	                         border-color var(--aca-motion-base) ease,
	                         transform var(--aca-motion-base) ease;
	--aca-card-lift-hover:   translateY(-1px);

	/* Accent bar pour cards hero/weekly (::before 3px top gradient) */
	--aca-card-accent-height:    3px;
	--aca-card-accent-xp:        linear-gradient(90deg, var(--aca-cyan), var(--aca-blue));
	--aca-card-accent-pierres:   linear-gradient(90deg, var(--aca-yellow), var(--aca-pink));
	--aca-card-accent-arena:     linear-gradient(90deg, var(--aca-pink), var(--aca-purple));

	background: var(--aca-bg-1);
	color: var(--aca-text);
	font-family: var(--aca-font);
	border-radius: var(--aca-radius);
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.ma-root *, .ma-root *::before, .ma-root *::after {
	box-sizing: border-box;
}

.ma-root :focus-visible {
	outline: 2px solid var(--aca-cyan);
	outline-offset: 2px;
	border-radius: var(--aca-radius-sm);
}

/* ─── v3.82.0 — Gamified accent animations ─── */
@keyframes aca-xp-fill {
	from { width: 0; }
}
@keyframes aca-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}
@keyframes aca-card-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes aca-avatar-glow {
	0%, 100% { box-shadow: 0 2px 12px var(--aca-pink-glow), 0 0 0 0 rgba(255, 45, 135, 0.25); }
	50%      { box-shadow: 0 2px 16px var(--aca-pink-glow), 0 0 0 8px rgba(255, 45, 135, 0); }
}
@keyframes aca-badge-pop {
	0%   { transform: scale(0.7); opacity: 0; }
	70%  { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes aca-streak-wiggle {
	0%, 100% { transform: rotate(0deg); }
	15%      { transform: rotate(-6deg); }
	30%      { transform: rotate(6deg); }
	45%      { transform: rotate(-4deg); }
	60%      { transform: rotate(3deg); }
	75%      { transform: rotate(0deg); }
}

/* ─── Login gate ─── */
.ma-login-gate {
	padding: 40px 20px;
	text-align: center;
}
.ma-login-gate p { margin: 0 0 16px; color: var(--aca-text-dim); }

/* ─── Hero banner (Apple Monochrome v3.79.0) ─── */
.ma-hero {
	position: relative;
	padding: 32px 24px 40px;
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.ma-hero::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 500px; height: 500px;
	background: radial-gradient(circle, var(--aca-pink-glow) 0%, transparent 60%);
	pointer-events: none;
}
.ma-hero::after {
	content: '';
	position: absolute;
	bottom: -40%; left: -10%;
	width: 400px; height: 400px;
	background: radial-gradient(circle, var(--aca-cyan-glow) 0%, transparent 60%);
	pointer-events: none;
}
.ma-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
}
.ma-avatar {
	width: 96px; height: 96px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
	border: 4px solid var(--aca-pink);
	box-shadow: 0 2px 12px var(--aca-pink-glow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: 900;
	color: #fff;
	flex-shrink: 0;
	overflow: hidden;
	animation: aca-avatar-glow 3s ease-in-out infinite;
}
.ma-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-avatar-fallback { text-transform: uppercase; }
.ma-hero-name {
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	color: var(--aca-text);
}
.ma-hero-title {
	font-size: 0.82rem;
	color: var(--aca-pink);
	font-weight: 700;
	font-style: italic;
}

/* ─── Stats ─── */
.ma-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 20px 24px;
	background: var(--aca-bg-1);
	border-bottom: 1px solid var(--aca-border);
}
.ma-stat {
	background: var(--aca-bg-2);
	border: 1px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	padding: 14px 16px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ma-stat::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.ma-stat-xp::before { background: linear-gradient(90deg, var(--aca-cyan), var(--aca-blue-2)); }
.ma-stat-pierres::before { background: linear-gradient(90deg, var(--aca-yellow), var(--aca-pink)); }
.ma-stat-label {
	font-size: 0.72rem;
	color: var(--aca-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 4px;
}
.ma-stat-value {
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Icône Pierres (remplace l'emoji 💎) */
.ma-pierres-icon {
	width: 1.4em;
	height: 1.4em;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
}
.ma-pierres-icon-fallback {
	font-size: 1em;
}
.ma-stat-sub {
	font-size: 0.75rem;
	color: var(--aca-text-dim);
	margin-top: 4px;
}
.ma-xp-bar {
	height: 8px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 8px;
}
.ma-xp-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--aca-cyan), var(--aca-blue-2), var(--aca-cyan));
	background-size: 200% 100%;
	box-shadow: 0 0 10px var(--aca-cyan-glow), 0 0 4px var(--aca-cyan-glow);
	border-radius: 4px;
	animation: aca-xp-fill 1s cubic-bezier(0.22, 1, 0.36, 1) both,
	           aca-shimmer 3s linear 1.2s infinite;
}

/* ─── Sections ─── */
.ma-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--aca-border);
}
.ma-section:last-child { border-bottom: none; }
.ma-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 12px;
}
.ma-section-title {
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}
.ma-section-title span {
	background: linear-gradient(90deg, var(--aca-pink), var(--aca-yellow));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ma-link {
	font-size: 0.8rem;
	color: var(--aca-cyan);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: opacity var(--aca-motion-fast);
}
.ma-link:hover { opacity: 0.8; text-decoration: underline; }

.ma-empty {
	padding: 20px 10px;
	text-align: center;
	color: var(--aca-text-muted);
	font-size: 0.9rem;
}

/* ─── Daily shop ─── */
.ma-shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.ma-shop-card {
	aspect-ratio: auto; /* v3.19.13 — laisse le contenu (bouton, nom) dicter la hauteur */
	background: var(--aca-bg-2);
	border: 2px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	font-size: 1rem;
	position: relative;
	overflow: hidden;
	transition: transform var(--aca-motion-fast);
}
/* v3.19.13 — scope image rule to .ma-shop-visual so small icons (e.g. pierres)
 * inside the buy button ne soient plus stretched à 80% du card. */
.ma-shop-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
.ma-shop-buy-btn img.ma-pierres-icon,
.ma-shop-name img,
.ma-shop-cost img {
	width: 1.2em;
	height: 1.2em;
	object-fit: contain;
}
.ma-shop-placeholder {
	font-weight: 900;
	color: var(--aca-text-dim);
}

/* Carte de titre — le nom est écrit dans le carré et s'auto-ajuste */
.ma-shop-card-title {
	padding: 10px;
	align-items: stretch;
}
.ma-shop-title-text {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-style: italic;
	font-weight: 700;
	line-height: 1.15;
	color: var(--aca-text);
	word-break: break-word;
	hyphens: auto;
	padding: 4px 6px 24px;
	/* La taille de police est ajustée dynamiquement par JS (data-autofit) */
	font-size: 1rem;
}

/* Couleur du texte selon la rareté de la carte */
.ma-shop-card-title.ma-rarity-common    .ma-shop-title-text { color: #d0d5e0; }
.ma-shop-card-title.ma-rarity-rare      .ma-shop-title-text { color: var(--aca-cyan); }
.ma-shop-card-title.ma-rarity-epic      .ma-shop-title-text { color: #cc88ff; }
.ma-shop-card-title.ma-rarity-legendary .ma-shop-title-text { color: var(--aca-yellow); }

.ma-shop-cost {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--aca-yellow);
	color: #000;
	font-size: 0.65rem;
	font-weight: 900;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	z-index: 2;
}
.ma-shop-cost .ma-pierres-icon {
	width: 11px;
	height: 11px;
}
.ma-shop-card:hover { transform: translateY(-3px); }

/* v2.7.3 — Items déjà possédés : visuel atténué + badge */
.ma-shop-card-owned {
	opacity: 0.65;
	pointer-events: none;
}
.ma-shop-card-owned:hover {
	transform: none;
}
.ma-shop-owned-badge {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--aca-green);
	color: #000;
	font-size: 0.65rem;
	font-weight: 900;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
	z-index: 2;
}

/* ─── Rarity ─── */
.ma-rarity-rare      { border-color: var(--aca-cyan);   box-shadow: 0 0 12px var(--aca-cyan-glow); }
.ma-rarity-epic      { border-color: var(--aca-purple); box-shadow: 0 0 12px var(--aca-purple-glow); }
.ma-rarity-legendary { border-color: var(--aca-yellow); box-shadow: 0 0 15px var(--aca-yellow-glow); }

/* ─── Collection tabs ─── */
.ma-collection-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.ma-tab {
	flex: 1;
	padding: 10px 12px;
	background: var(--aca-bg-2);
	border: 1px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	color: var(--aca-text-dim);
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	font-family: inherit;
	transition: all var(--aca-motion-fast);
}
.ma-tab:hover { background: rgba(0, 0, 0, 0.03); }
.ma-tab.active {
	background: var(--aca-pink);
	color: #fff;
	border-color: var(--aca-pink);
	box-shadow: 0 0 15px var(--aca-pink-glow);
}

/* ─── Avatar collection grid ─── */
.ma-collection-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.ma-col-item {
	aspect-ratio: 1;
	background: var(--aca-bg-2);
	border: 2px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	color: inherit;
	transition: transform var(--aca-motion-fast), border-color var(--aca-motion-fast), box-shadow var(--aca-motion-fast);
}
.ma-col-item:hover:not(.equipped):not(:disabled) {
	transform: translateY(-2px);
	border-color: var(--aca-cyan);
	box-shadow: 0 0 10px var(--aca-cyan-glow);
}
.ma-col-item:disabled {
	opacity: 0.55;
	cursor: wait;
}
.ma-col-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ma-col-item.equipped {
	border-color: var(--aca-green) !important;
	box-shadow: 0 0 12px var(--aca-green-glow) !important;
}
.ma-col-item.equipped::after {
	content: '✓';
	position: absolute;
	top: 3px;
	right: 3px;
	background: var(--aca-green);
	color: #000;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ─── Titles list ─── */
.ma-titles-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ma-title-chip {
	padding: 8px 14px;
	background: var(--aca-bg-2);
	border: 1.5px solid var(--aca-border);
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	font-style: italic;
	color: var(--aca-text-dim);
	position: relative;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--aca-motion-fast), border-color var(--aca-motion-fast), color var(--aca-motion-fast);
}
.ma-title-chip:disabled {
	opacity: 0.55;
	cursor: wait;
}

/* ─── Couleur de texte par rareté (titres) ─── */
.ma-title-chip.ma-rarity-common    { color: #d0d5e0; }
.ma-title-chip.ma-rarity-rare      { color: var(--aca-cyan); }
.ma-title-chip.ma-rarity-epic      { color: #cc88ff; }
.ma-title-chip.ma-rarity-legendary { color: var(--aca-yellow); }

.ma-title-chip:hover:not(.equipped):not(:disabled) {
	background: rgba(0, 0, 0, 0.03);
	filter: brightness(1.2);
}
.ma-title-chip.equipped {
	background: linear-gradient(135deg, rgba(82, 208, 96, 0.1), rgba(0, 210, 255, 0.1));
	border-color: var(--aca-green) !important;
	color: #fff;
	box-shadow: 0 0 10px var(--aca-green-glow);
}
.ma-title-equipped-badge {
	margin-left: 6px;
	color: var(--aca-green);
	font-weight: 900;
}

/* ─── Arena CTA ─── */
.ma-arena-cta {
	display: block;
	position: relative;
	padding: 24px;
	text-align: center;
	border-radius: var(--aca-radius);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(135deg, var(--aca-pink) 0%, var(--aca-purple) 100%);
	box-shadow: 0 4px 16px var(--aca-pink-glow);
	transition: transform var(--aca-motion-base);
}
.ma-arena-cta::before {
	content: '⚔️';
	position: absolute;
	top: -20px;
	right: -10px;
	font-size: 6rem;
	opacity: 0.15;
	transform: rotate(15deg);
	pointer-events: none;
}
.ma-arena-cta:hover { transform: translateY(-2px); }
.ma-arena-content { position: relative; z-index: 1; }
.ma-arena-title {
	font-size: 1.3rem;
	font-weight: 900;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.ma-arena-desc {
	font-size: 0.88rem;
	color: var(--aca-text-dim);
	margin: 0 0 16px;
}
.ma-arena-btn {
	display: inline-block;
	padding: 12px 24px;
	background: #fff;
	color: var(--aca-pink);
	border-radius: 10px;
	font-weight: 900;
	font-size: 0.95rem;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ─── Parent link ─── */
.ma-parent-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--aca-bg-2);
	border-radius: var(--aca-radius-sm);
	border: 1px solid var(--aca-border);
	text-decoration: none;
	color: inherit;
	transition: background var(--aca-motion-fast), border-color var(--aca-motion-fast);
}
.ma-parent-link:hover {
	background: rgba(0, 0, 0, 0.02);
	border-color: var(--aca-yellow);
}
.ma-parent-icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--aca-yellow), var(--aca-pink));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	flex-shrink: 0;
}
.ma-parent-label { flex: 1; }
.ma-parent-label strong { display: block; font-size: 0.95rem; color: var(--aca-text); }
.ma-parent-label span { font-size: 0.78rem; color: var(--aca-text-muted); }
.ma-parent-arrow { color: var(--aca-text-muted); font-size: 1.2rem; }

/* ─── Activity — v3.82.0 card-style ─── */
.ma-activity {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ma-activity-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--aca-card-bg);
	border-radius: var(--aca-card-radius);
	border-left: 3px solid var(--aca-cyan);
	font-size: 0.85rem;
	flex-wrap: wrap;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
	transition: transform var(--aca-motion-base) ease, box-shadow var(--aca-motion-base) ease;
}
.ma-activity-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.04);
}
.ma-activity-xp       { border-left-color: var(--aca-cyan); }
.ma-activity-arena    { border-left-color: var(--aca-pink); }
.ma-activity-pierres  { border-left-color: var(--aca-yellow); }
.ma-activity-purchase { border-left-color: var(--aca-purple); }
.ma-activity-item strong { font-weight: 800; color: var(--aca-text); }
.ma-activity-desc { color: var(--aca-text-dim); flex: 1; }
.ma-activity-time {
	margin-left: auto;
	color: var(--aca-text-muted);
	font-size: 0.72rem;
	font-weight: 500;
}

/* ─── Responsive desktop ─── */
@media (min-width: 768px) {
	.ma-hero { padding: 48px 40px 56px; }
	.ma-hero-name { font-size: 2.2rem; }
	.ma-stats { padding: 24px 40px; }
	.ma-section { padding: 32px 40px; }
	.ma-shop-grid { grid-template-columns: repeat(6, 1fr); }
	.ma-collection-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ─── Equip feedback ─── */
.ma-equip-flash {
	animation: ma-flash 0.7s ease-out;
}
@keyframes ma-flash {
	0%   { box-shadow: 0 0 0 0 var(--aca-green-glow); }
	40%  { box-shadow: 0 0 20px 8px var(--aca-green-glow); }
	100% { box-shadow: 0 0 0 0 rgba(82, 208, 96, 0); }
}

.ma-equip-error {
	animation: ma-error 0.4s ease-out;
	border-color: var(--aca-pink) !important;
}
@keyframes ma-error {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
	.ma-shop-card, .ma-arena-cta, .ma-parent-link, .ma-xp-bar-fill,
	.ma-col-item, .ma-title-chip {
		transition: none !important;
	}
	.ma-equip-flash, .ma-equip-error {
		animation: none !important;
	}
}

/* ==========================================================================
   v2.5.7 — Section Streak (série de jours consécutifs)
   ========================================================================== */
.ma-streak-section {
	/* même section style, on réutilise */
}

.ma-streak-best {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--aca-yellow);
	background: rgba(245, 197, 24, 0.1);
	padding: 4px 10px;
	border-radius: 20px;
	border: 1px solid rgba(245, 197, 24, 0.3);
}

.ma-streak-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(245, 197, 24, 0.12));
	border: 1px solid rgba(245, 197, 24, 0.3);
	border-radius: var(--aca-radius);
	padding: 16px 18px;
	margin-bottom: 14px;
}

.ma-streak-flame {
	font-size: 3rem;
	line-height: 1;
	filter: drop-shadow(0 0 10px rgba(245, 197, 24, 0.6));
	animation: ma-flame-pulse 1.8s ease-in-out infinite;
}

@keyframes ma-flame-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.ma-streak-flame { animation: none; }
}

.ma-streak-info { flex: 1; }

.ma-streak-count strong {
	font-size: 2.2rem;
	font-weight: 900;
	color: var(--aca-yellow);
	letter-spacing: -0.02em;
	display: block;
	line-height: 1;
}
.ma-streak-count span {
	font-size: 0.85rem;
	color: var(--aca-text-dim);
	font-weight: 600;
}

.ma-streak-status {
	margin-top: 6px;
	font-size: 0.82rem;
	font-weight: 600;
}
.ma-streak-status-ok   { color: var(--aca-green); }
.ma-streak-status-warn { color: var(--aca-yellow); }

.ma-streak-milestone {
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--aca-text-muted);
	font-style: italic;
}

/* Mini-grille 7 jours */
.ma-streak-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.ma-streak-day {
	aspect-ratio: 1;
	background: var(--aca-bg-2);
	border: 1.5px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 0.7rem;
	color: var(--aca-text-muted);
	position: relative;
	transition: transform var(--aca-motion-fast);
}

.ma-streak-day-num {
	font-weight: 800;
	font-size: 0.85rem;
}
.ma-streak-day-reward {
	font-size: 0.65rem;
	opacity: 0.8;
}

.ma-streak-day.done {
	background: linear-gradient(135deg, rgba(82, 208, 96, 0.15), rgba(0, 210, 255, 0.15));
	border-color: var(--aca-green);
	color: var(--aca-text);
}

.ma-streak-day.current {
	background: linear-gradient(135deg, var(--aca-yellow), #ff9020);
	border-color: var(--aca-yellow);
	color: #000;
	font-weight: 900;
	box-shadow: 0 0 15px var(--aca-yellow-glow);
	transform: scale(1.05);
}

.ma-streak-day.future {
	opacity: 0.55;
}

.ma-streak-day.milestone {
	border-width: 2px;
	border-color: var(--aca-pink);
	box-shadow: 0 0 10px var(--aca-pink-glow);
}
.ma-streak-day.milestone::after {
	content: '⭐';
	position: absolute;
	top: -6px;
	right: -4px;
	font-size: 0.8rem;
	filter: drop-shadow(0 0 4px rgba(245, 197, 24, 0.7));
}

/* ==========================================================================
   v2.5.8 — Section Navigation rapide (Aller à)
   ========================================================================== */
.ma-nav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.ma-nav-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 10px;
	background: var(--aca-bg-2);
	border: 1px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	color: var(--aca-text);
	text-decoration: none;
	transition: transform var(--aca-motion-fast), border-color var(--aca-motion-fast), box-shadow var(--aca-motion-fast);
	position: relative;
}
.ma-nav-tile:hover {
	transform: translateY(-2px);
	border-color: var(--aca-cyan);
	box-shadow: 0 0 12px var(--aca-cyan-glow);
	color: var(--aca-text);
}

.ma-nav-icon {
	font-size: 1.8rem;
	line-height: 1;
}
.ma-nav-label {
	font-size: 0.82rem;
	font-weight: 700;
	text-align: center;
	color: var(--aca-text);
}
.ma-nav-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	background: var(--aca-pink);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 900;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 8px var(--aca-pink-glow);
}


/* ===================================================================
 * v3.19.12 — Magasin du jour : cards avec bouton d'achat direct
 * =================================================================== */
.ma-shop-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	padding: 10px;
}
.ma-shop-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(0,0,0,0.15);
}
.ma-shop-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ma-shop-title-text {
	font-style: italic;
	font-weight: 700;
	text-align: center;
	padding: 6px 10px;
	font-size: 0.95rem;
	color: inherit;
}
.ma-shop-placeholder {
	font-size: 2rem;
	font-weight: 800;
	color: var(--aca-text-muted);
}
.ma-shop-meta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	margin-top: 6px;
}
.ma-shop-name {
	font-size: 12px;
	font-weight: 600;
	color: inherit;
	text-align: center;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.9;
}
.ma-shop-owned-badge {
	display: block;
	text-align: center;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(74, 222, 128, 0.15);
	color: #86efac;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.ma-shop-buy-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	padding: 8px 10px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, #f5a405, #ff6b35);
	color: #fff;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	box-shadow: 0 2px 8px rgba(245, 164, 5, 0.35);
	line-height: 1.15;
}
.ma-shop-buy-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(245, 164, 5, 0.45);
}
.ma-shop-buy-label {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.ma-shop-buy-cost {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.95;
	white-space: nowrap;
}
.ma-shop-buy-btn-disabled,
.ma-shop-buy-btn:disabled {
	background: rgba(128, 128, 128, 0.4);
	color: var(--aca-text-dim);
	cursor: not-allowed;
	box-shadow: none;
}
.ma-shop-card-locked { opacity: 0.7; }

/* ─────────────────────────────────────────────────────────────────────
   v3.39.0 — Quick links + Zone tabs
   ───────────────────────────────────────────────────────────────────── */

.ma-quicklinks {
	display: flex;
	gap: 8px;
	margin: 0 0 16px 0;
	padding: 8px;
	background: rgba(0,0,0,0.02);
	border-radius: 14px;
	position: sticky;
	top: 8px;
	z-index: 10;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.ma-ql {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 8px;
	border-radius: 10px;
	background: rgba(0,0,0,0.03);
	color: inherit;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	transition: background .15s, transform .15s;
	min-height: 56px;
	justify-content: center;
}
.ma-ql:hover, .ma-ql:focus {
	background: rgba(0,0,0,0.06);
	transform: translateY(-1px);
}
.ma-ql-icon { font-size: 18px; line-height: 1; }
.ma-ql-arena { background: linear-gradient(135deg, rgba(255,45,135,0.2), rgba(168,85,247,0.2)); }
.ma-ql-parent { background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(46,204,113,0.2)); }
.ma-ql-logout { background: rgba(0,0,0,0.02); }

@media (max-width: 480px) {
	.ma-ql-label { font-size: 11px; }
}

/* v3.55.0 — Tabs nav modernisée : glass backdrop + scroll-snap + active state pill propre. */
.ma-zone-tabs {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 14px 0 14px;
	padding: 5px;
	background: rgba(245, 245, 247, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--aca-border);
	border-radius: 14px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	scroll-padding: 5px;
}
.ma-zone-tabs::-webkit-scrollbar { display: none; }

.ma-zone-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 0;
	background: transparent;
	color: var(--aca-text-dim);
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.01em;
	border-radius: 10px;
	cursor: pointer;
	white-space: nowrap;
	scroll-snap-align: start;
	position: relative;
	transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ma-zone-tab:hover {
	background: rgba(0,0,0,0.02);
	color: #fff;
}
.ma-zone-tab:focus-visible {
	outline: 2px solid var(--aca-cyan, #00e5ff);
	outline-offset: 2px;
}
.ma-zone-tab.active {
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	color: #fff;
	box-shadow: 0 4px 14px rgba(255, 45, 135, 0.18);
}
.ma-zone-tab.active:hover {
	transform: translateY(-1px);
}
.ma-zone-tab-icon {
	font-size: 16px;
	line-height: 1;
}
.ma-zone-tab-label {
	font-size: 13px;
	line-height: 1;
}

.ma-zone-pane[hidden] { display: none !important; }

/* Mobile : layout vertical icon+label retiré, tout reste sur une ligne mais plus serré. */
@media (max-width: 640px) {
	.ma-zone-tabs {
		margin: 10px 0 12px;
		padding: 4px;
		border-radius: 12px;
	}
	.ma-zone-tab {
		padding: 8px 11px;
		gap: 5px;
		font-size: 12px;
	}
	.ma-zone-tab-icon { font-size: 15px; }
	.ma-zone-tab-label { font-size: 12px; }
}

/* Accueil cards — v3.82.0 Apple clean + gamified accents */
.ma-accueil-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.ma-accueil-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 18px 20px;
	border: 0;
	border-radius: 16px;
	background: var(--aca-card-bg);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
	transition: transform var(--aca-motion-base) cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow var(--aca-motion-base) cubic-bezier(0.22, 1, 0.36, 1),
	            background var(--aca-motion-base) ease;
	animation: aca-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ma-accueil-card:nth-child(1) { animation-delay: 0.05s; }
.ma-accueil-card:nth-child(2) { animation-delay: 0.12s; }
.ma-accueil-card:nth-child(3) { animation-delay: 0.19s; }
.ma-accueil-card:nth-child(4) { animation-delay: 0.26s; }
.ma-accueil-card:nth-child(5) { animation-delay: 0.33s; }
.ma-accueil-card:nth-child(6) { animation-delay: 0.40s; }
.ma-accueil-card:hover, .ma-accueil-card:focus {
	transform: translateY(-3px) scale(1.01);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06);
	background: var(--aca-card-bg-hover);
}
.ma-accueil-card:active {
	transform: translateY(-1px) scale(0.99);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.ma-accueil-card-icon {
	width: 44px; height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.03);
}
.ma-accueil-card-body h3 {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.ma-accueil-card-body p {
	margin: 0;
	font-size: 13px;
	color: var(--aca-text-dim);
	line-height: 1.35;
}
/* Variant icon circles — gamified accent colors */
.ma-accueil-card-arena .ma-accueil-card-icon   { background: var(--aca-pink-glow); }
.ma-accueil-card-missions .ma-accueil-card-icon { background: var(--aca-yellow-glow); }
.ma-accueil-card-shop .ma-accueil-card-icon     { background: var(--aca-cyan-glow); }

/* v3.39.1 — Personnalisation : Mon compte */
.ma-account-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}
.ma-account-card {
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(0,0,0,0.02);
	display: block;
	color: inherit;
	text-decoration: none;
	transition: background .15s, transform .15s;
}
.ma-account-card-link:hover {
	background: rgba(0,0,0,0.04);
	transform: translateY(-1px);
}
.ma-account-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
	margin-bottom: 4px;
}
.ma-account-value {
	font-weight: 700;
	font-size: 14px;
}
.ma-account-card-parent {
	background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(46,204,113,0.18));
}
.ma-prefs-placeholder {
	margin: 0 0 8px;
}

/* v3.39.2 — Tab Accès rapide (cartes) */
.ma-zone-tabs {
	margin-top: 0;
	margin-bottom: 16px;
}
.ma-quicklinks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.ma-ql-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 18px;
	border: 0;
	border-radius: 14px;
	background: rgba(0,0,0,0.02);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s, background .15s;
}
.ma-ql-card:hover, .ma-ql-card:focus {
	transform: translateY(-2px);
	background: rgba(0,0,0,0.04);
}
.ma-ql-card-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.ma-ql-card-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.ma-ql-card-body p { margin: 0; font-size: 13px; opacity: 0.8; }
.ma-ql-card.ma-ql-arena { background: linear-gradient(135deg, rgba(255,45,135,0.18), rgba(168,85,247,0.18)); }
.ma-ql-card.ma-ql-parent { background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(46,204,113,0.18)); }
.ma-ql-card.ma-ql-logout { background: rgba(0,0,0,0.02); }

.ma-missions-cta {
	margin-top: 16px;
	text-align: center;
}
.ma-missions-full-link {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
}

/* v3.39.3 — Sous-onglets Missions */
.ma-subtabs {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	padding: 4px;
	background: rgba(0,0,0,0.02);
	border-radius: 12px;
}
.ma-subtab {
	flex: 1;
	padding: 8px 14px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.ma-subtab:hover { background: rgba(0,0,0,0.03); }
.ma-subtab.active {
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	color: #fff;
}
.ma-subpane[hidden] { display: none !important; }

/* v3.39.3 — Personnalisation : Mon avatar / Mon titre actuels */
.ma-current-look {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}
.ma-current-card {
	padding: 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255,212,0,0.12), rgba(168,85,247,0.12));
	display: flex;
	gap: 14px;
	align-items: center;
}
.ma-current-card .ma-current-img {
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(0,0,0,0.04);
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; flex-shrink: 0; overflow: hidden;
}
.ma-current-card .ma-current-img img { width: 100%; height: 100%; object-fit: cover; }
.ma-current-card .ma-current-label { font-size: 12px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ma-current-card .ma-current-name { font-weight: 700; font-size: 15px; }
@media (max-width: 480px) {
	.ma-current-look { grid-template-columns: 1fr; }
}

/* v3.39.4 — Tab Groupes & Tab Cours */
.ma-groups-grid, .ma-courses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}
.ma-group-card, .ma-course-card {
	display: flex;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
	background: rgba(0,0,0,0.02);
	color: inherit;
	text-decoration: none;
	transition: transform .15s, background .15s;
}
.ma-group-card:hover, .ma-course-card:hover { transform: translateY(-2px); background: rgba(0,0,0,0.04); }
.ma-group-avatar, .ma-course-thumb {
	width: 52px; height: 52px; border-radius: 12px;
	flex-shrink: 0; overflow: hidden;
	background: rgba(0,0,0,0.04);
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
}
.ma-group-avatar img, .ma-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ma-group-name, .ma-course-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.ma-group-meta, .ma-course-meta { font-size: 12px; opacity: 0.7; }
.ma-course-progress {
	height: 6px; border-radius: 3px;
	background: rgba(0,0,0,0.04);
	margin: 6px 0 4px;
	overflow: hidden;
}
.ma-course-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	transition: width .3s;
}

/* ─────────────────────────────────────────────────────────────────────
   v3.39.5 — Mode plein écran pour /mon-academie/
   Body class `aca-mon-academie-fullscreen` est ajoutée par PHP quand
   la page contient le shortcode [academy_mon_academie].
   On override les containers du thème (BuddyBoss, blocs Gutenberg,
   thèmes génériques) pour que la page utilise toute la largeur.
   La .ma-root garde un max-width généreux centré pour le confort
   de lecture sur très grands écrans.
   ───────────────────────────────────────────────────────────────────── */

body.aca-mon-academie-fullscreen #content,
body.aca-mon-academie-fullscreen #primary,
body.aca-mon-academie-fullscreen .site-content,
body.aca-mon-academie-fullscreen .site-main,
body.aca-mon-academie-fullscreen .entry-content,
body.aca-mon-academie-fullscreen .entry-content-wrap,
body.aca-mon-academie-fullscreen .container,
body.aca-mon-academie-fullscreen .bb-container,
body.aca-mon-academie-fullscreen .bb-grid,
body.aca-mon-academie-fullscreen .bb-template-v2 .site-content,
body.aca-mon-academie-fullscreen article.page,
body.aca-mon-academie-fullscreen .wp-block-group,
body.aca-mon-academie-fullscreen .alignwide,
body.aca-mon-academie-fullscreen .alignfull {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.aca-mon-academie-fullscreen .ma-root {
	max-width: 1400px;
	margin: 0 auto;
	padding: 16px clamp(12px, 3vw, 32px);
	box-sizing: border-box;
	width: 100%;
}

/* Sidebar BuddyBoss / WP : on cache si elles existent sur cette page */
body.aca-mon-academie-fullscreen .secondary,
body.aca-mon-academie-fullscreen #secondary,
body.aca-mon-academie-fullscreen .widget-area,
body.aca-mon-academie-fullscreen .sidebar {
	display: none !important;
}

/* Au cas où le thème impose un grid 8/4 ou 9/3 sur le content */
body.aca-mon-academie-fullscreen .bb-template-v2 .bb-grid,
body.aca-mon-academie-fullscreen .has-sidebar {
	grid-template-columns: 1fr !important;
	display: block !important;
}

/* v3.41.1 — Badge compteur sur les tabs / v3.55.0 — fade-out animation au clic */
.ma-zone-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 2px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), #ff5fa3);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(255,45,135,0.45);
	transition: opacity .25s ease, transform .25s ease;
	transform-origin: center;
	animation: ma-badge-pulse 2.4s ease-in-out infinite;
}
.ma-zone-tab.active .ma-zone-tab-badge {
	background: rgba(0,0,0,0.08);
	color: #fff;
	box-shadow: none;
	animation: none;
}
.ma-zone-tab-badge.is-fading {
	opacity: 0;
	transform: scale(0.6);
	pointer-events: none;
}
@keyframes ma-badge-pulse {
	0%, 100% { box-shadow: 0 2px 6px rgba(255,45,135,0.45); }
	50%      { box-shadow: 0 2px 12px rgba(255,45,135,0.75); }
}
@media (prefers-reduced-motion: reduce) {
	.ma-zone-tab-badge { animation: none; transition: none; }
}

/* v3.44.0 — Banner view_as (parent voit l'espace de l'enfant) */
.ma-view-as-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	margin: 0 0 14px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(255,212,0,0.18), rgba(255,45,135,0.18));
	border: 1px solid rgba(255,212,0,0.40);
	flex-wrap: wrap;
	position: sticky;
	top: 8px;
	z-index: 20;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.ma-view-as-icon { font-size: 20px; line-height: 1; }
.ma-view-as-label { flex: 1; font-size: 14px; }
.ma-view-as-label strong { color: var(--aca-yellow, #ffd400); }
.ma-view-as-exit-form { margin: 0; }
.ma-view-as-exit-btn {
	padding: 6px 14px;
	border: 0;
	border-radius: 8px;
	background: rgba(0,0,0,0.04);
	color: inherit;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s;
}
.ma-view-as-exit-btn:hover { background: rgba(0,0,0,0.08); }

/* v3.70.0 — Switcher inline enfant dans banner view_as (parents multi-enfants) */
.ma-view-as-switch-form { margin: 0; }
.ma-view-as-switch-select {
	padding: 6px 12px;
	border: 1px solid rgba(255,212,0,0.45);
	border-radius: 8px;
	background: rgba(0,0,0,0.05);
	color: inherit;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	max-width: 200px;
	appearance: auto;
}
.ma-view-as-switch-select:hover,
.ma-view-as-switch-select:focus-visible {
	background: rgba(0,0,0,0.08);
	border-color: var(--aca-yellow, #ffd400);
	outline: none;
}
.ma-view-as-switch-select option {
	background: #ffffff;
	color: var(--aca-text);
}
@media (max-width: 560px) {
	.ma-view-as-banner { gap: 8px; }
	.ma-view-as-switch-select { max-width: 100%; flex: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   v3.71.0 — Section « Cette semaine » + hiérarchie KPI tab Stats
   ───────────────────────────────────────────────────────────────────── */

.ma-weekly-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}
.ma-weekly-card {
	padding: 14px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.02);
	border: 1px solid var(--aca-border);
	position: relative;
	overflow: hidden;
	transition: transform .15s ease, background .15s ease;
}
.ma-weekly-card:hover { transform: translateY(-2px); background: rgba(0, 0, 0, 0.03); }
.ma-weekly-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.ma-weekly-card--xp::before      { background: linear-gradient(90deg, var(--aca-cyan, #00e5ff), var(--aca-blue-2, #0066ff)); }
.ma-weekly-card--pierres::before { background: linear-gradient(90deg, var(--aca-yellow, #ffd400), var(--aca-pink, #ff2d87)); }
.ma-weekly-card--arena::before   { background: linear-gradient(90deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7)); }

.ma-weekly-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.ma-weekly-card-lbl {
	font-size: 11px;
	color: var(--aca-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.ma-weekly-trend {
	font-size: 11px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.03);
}
.ma-weekly-trend--up   { color: #2ecc71; background: rgba(46, 204, 113, 0.15); }
.ma-weekly-trend--down { color: #ff5a7e; background: rgba(255, 90, 126, 0.15); }
.ma-weekly-trend--flat { color: var(--aca-text-muted); }

.ma-weekly-card-value {
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 6px;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-weekly-card--xp .ma-weekly-card-value      { background: linear-gradient(135deg, var(--aca-cyan, #00e5ff), var(--aca-blue-2, #0066ff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ma-weekly-card--pierres .ma-weekly-card-value { background: linear-gradient(135deg, var(--aca-yellow, #ffd400), var(--aca-pink, #ff2d87)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ma-sparkline {
	display: block;
	width: 100%;
	height: 28px;
}

/* Hiérarchie KPI : hero (4 grosses) + secondary (4 petites) + collection (2) */
.ma-stats-grid--hero {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}
.ma-stats-grid--secondary {
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
	margin-bottom: 10px;
}
.ma-stats-grid--collection {
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 22px;
}
.ma-stat-card--hero {
	padding: 18px 14px;
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid var(--aca-border);
	border-radius: 14px;
}
.ma-stat-card--hero .ma-stat-card-num { font-size: 28px; }
.ma-stat-card--small { padding: 10px; }
.ma-stat-card--small .ma-stat-card-num { font-size: 18px; }
.ma-stat-card--collection { padding: 12px; background: linear-gradient(135deg, rgba(255, 212, 0, 0.06), rgba(168, 85, 247, 0.06)); }
.ma-stat-card-total { font-size: 0.65em; color: var(--aca-text-dim); font-weight: 700; margin-left: 2px; }

/* Accent borders pour hero cards. */
.ma-stat-card--hero.ma-stat-card--xp::before      { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aca-cyan, #00e5ff), var(--aca-blue-2, #0066ff)); }
.ma-stat-card--hero.ma-stat-card--level::before   { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aca-purple, #a855f7), var(--aca-pink, #ff2d87)); }
.ma-stat-card--hero.ma-stat-card--pierres::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aca-yellow, #ffd400), var(--aca-pink, #ff2d87)); }
.ma-stat-card--hero.ma-stat-card--correct::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aca-green, #2ecc71), var(--aca-cyan, #00e5ff)); }
.ma-stat-card--hero { position: relative; overflow: hidden; }

@media (max-width: 600px) {
	.ma-weekly-grid { grid-template-columns: 1fr; }
	.ma-stats-grid--hero { grid-template-columns: 1fr 1fr; }
	.ma-stats-grid--secondary { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   v3.76.0 — Heatmap 30j + Rectangles Bulletin (Forces / À travailler) + Pratique cette notion
   ───────────────────────────────────────────────────────────────────── */

/* Heatmap 30 jours */
.ma-heatmap-wrap {
	padding: 12px 14px;
	background: rgba(0, 210, 255, 0.04);
	border: 1px solid rgba(0, 210, 255, 0.18);
	border-radius: 12px;
	margin-bottom: 22px;
}
.ma-heatmap {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-bottom: 8px;
}
.ma-heatmap-meta {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--aca-text-dim);
	flex-wrap: wrap;
	gap: 6px;
}
.ma-heatmap-legend { opacity: 0.7; }

/* Rectangles Bulletin (Forces + À travailler côte à côte) */
.ma-bulletin-rectangles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
.ma-bulletin-card {
	padding: 14px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.02);
	border: 1px solid var(--aca-border);
	position: relative;
	overflow: hidden;
}
.ma-bulletin-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.ma-bulletin-card--forces::before { background: linear-gradient(90deg, var(--aca-green, #52d060), var(--aca-cyan, #00d2ff)); }
.ma-bulletin-card--work::before   { background: linear-gradient(90deg, var(--aca-yellow, #f5c518), var(--aca-pink, #e94560)); }
.ma-bulletin-card-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
}
.ma-bulletin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ma-bulletin-item { display: flex; flex-direction: column; gap: 4px; }
.ma-bulletin-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ma-bulletin-item-label { font-size: 13px; font-weight: 700; }
.ma-bulletin-item-score { font-size: 13px; font-weight: 900; color: var(--aca-green, #52d060); }
.ma-bulletin-item-score--work { color: var(--aca-yellow, #f5c518); }
.ma-bulletin-bar {
	height: 6px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 3px;
	overflow: hidden;
}
.ma-bulletin-bar-fill { height: 100%; border-radius: 3px; transition: width .35s ease-out; }
.ma-bulletin-bar-fill--ok   { background: linear-gradient(90deg, var(--aca-green, #52d060), var(--aca-cyan, #00d2ff)); }
.ma-bulletin-bar-fill--work { background: linear-gradient(90deg, var(--aca-yellow, #f5c518), var(--aca-pink, #e94560)); }
.ma-bulletin-item-sub { font-size: 11px; color: var(--aca-text-dim); }

/* Coaching hint */
.ma-bulletin-hint {
	margin: 0 0 22px;
	padding: 10px 14px;
	background: linear-gradient(135deg, rgba(180, 74, 255, 0.10), rgba(0, 210, 255, 0.08));
	border-left: 3px solid var(--aca-purple, #b44aff);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	font-style: italic;
}
.ma-bulletin-empty {
	margin: 0 0 22px;
	padding: 14px;
	background: rgba(0, 0, 0, 0.02);
	border: 1px dashed var(--aca-border);
	border-radius: 12px;
	text-align: center;
	color: var(--aca-text-dim);
	font-size: 13px;
}

/* Pratique cette notion (top errors) */
.ma-bulletin-errors {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 22px;
}
.ma-bulletin-error {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(255, 45, 135, 0.06);
	border: 1px solid rgba(255, 45, 135, 0.18);
	border-radius: 10px;
	flex-wrap: wrap;
}
.ma-bulletin-error-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ma-bulletin-error-label { font-weight: 800; font-size: 14px; }
.ma-bulletin-error-meta { font-size: 11px; color: var(--aca-text-dim); }
.ma-bulletin-error-cta {
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--aca-pink, #e94560), var(--aca-purple, #b44aff));
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ma-bulletin-error-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(233, 69, 96, 0.32);
}

@media (max-width: 600px) {
	.ma-bulletin-rectangles { grid-template-columns: 1fr; }
}

/* v3.45.0 — Tab Stats : grille stats + Top 5 atteignables */
.ma-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-bottom: 22px;
}
.ma-stat-card {
	padding: 14px;
	border-radius: 12px;
	background: rgba(0,0,0,0.02);
	text-align: center;
	transition: transform .15s, background .15s;
}
.ma-stat-card:hover { transform: translateY(-1px); background: rgba(0,0,0,0.04); }
.ma-stat-card-num {
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1.1;
	margin-bottom: 4px;
}
.ma-stat-card-lbl {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.75;
}
.ma-stats-subtitle {
	margin: 8px 0 14px;
	font-size: 16px;
	font-weight: 700;
}
.ma-top5-list { display: flex; flex-direction: column; gap: 10px; }
.ma-top5-item {
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(0,0,0,0.02);
}
.ma-top5-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ma-top5-label { font-weight: 700; font-style: italic; }
.ma-top5-rarity { font-size: 10px; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; }
.ma-top5-rarity.ma-rarity-common { background: rgba(0,0,0,0.04); }
.ma-top5-rarity.ma-rarity-rare { background: rgba(0,229,255,0.20); color: var(--aca-cyan, #00e5ff); }
.ma-top5-rarity.ma-rarity-epic { background: rgba(168,85,247,0.20); color: var(--aca-purple, #a855f7); }
.ma-top5-rarity.ma-rarity-legendary { background: rgba(255,212,0,0.20); color: var(--aca-yellow, #ffd400); }
.ma-top5-progress {
	height: 8px; border-radius: 4px; background: rgba(0,0,0,0.04);
	overflow: hidden; margin: 4px 0 6px;
}
.ma-top5-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--aca-pink, #ff2d87), var(--aca-yellow, #ffd400));
	transition: width .3s;
}
.ma-top5-meta { display: flex; justify-content: space-between; font-size: 12px; opacity: 0.85; }
.ma-top5-pct { font-weight: 800; color: var(--aca-yellow, #ffd400); }

/* v3.49.0 — Bubble PIN par défaut 1234 */
.ma-pin-bubble {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	margin: 0 0 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(168,85,247,0.15));
	border: 1px solid rgba(0,229,255,0.30);
	flex-wrap: wrap;
}
.ma-pin-bubble-icon { font-size: 22px; line-height: 1; }
.ma-pin-bubble-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ma-pin-bubble-body strong { font-size: 14px; }
.ma-pin-bubble-body span { font-size: 12px; opacity: 0.8; }
.ma-pin-bubble-dismiss-form { margin: 0; }
.ma-pin-bubble-x {
	width: 28px; height: 28px; border-radius: 50%;
	border: 0; background: rgba(0,0,0,0.04);
	color: inherit; font-size: 14px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.ma-pin-bubble-x:hover { background: rgba(0,0,0,0.08); }

/* v3.50.0 — Mini-bar Accès rapide (sous tabs, au-dessus du hero) */
.ma-quickbar {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	flex-wrap: wrap;
}
.ma-qb-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 18px;
	background: rgba(0,0,0,0.02);
	color: inherit;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	transition: background .15s, transform .15s;
}
.ma-qb-link:hover { background: rgba(0,0,0,0.04); transform: translateY(-1px); }
.ma-qb-link-logout { opacity: 0.7; margin-left: auto; }
@media (max-width: 480px) {
	.ma-qb-lbl { display: none; }
	.ma-qb-link { padding: 8px 10px; }
}

/* v3.82.0 — Hero status badge dynamique (pop-in animation) */
.ma-hero-status {
	margin-top: 8px;
	display: inline-block;
	padding: 4px 14px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255,212,0,0.20), rgba(255,45,135,0.20));
	border: 1px solid rgba(255,212,0,0.30);
	font-size: 13px;
	font-weight: 700;
	animation: aca-badge-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* v3.50.0 — Streak risk banner (orange, sticky en haut, urgent) */
.ma-streak-risk-banner {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	margin: 0 0 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255,107,53,0.20), rgba(255,45,135,0.20));
	border: 1px solid rgba(255,107,53,0.40);
	flex-wrap: wrap;
	animation: srb-pulse 2s ease-in-out infinite;
}
@keyframes srb-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.40); }
	50%      { box-shadow: 0 0 0 8px rgba(255,107,53,0); }
}
.ma-srb-icon { font-size: 24px; line-height: 1; }
.ma-srb-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ma-srb-body strong { font-size: 14px; }
.ma-srb-cta {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), #ff6b35);
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	align-self: flex-start;
}

/* v3.82.0 — Variantes accueil cards (Apple card + accent icon circle) */
.ma-accueil-card.ma-accueil-card--streak .ma-accueil-card-icon {
	background: linear-gradient(135deg, rgba(255,107,53,0.15), rgba(255,212,0,0.15));
	animation: aca-streak-wiggle 2.5s ease-in-out infinite;
}
.ma-accueil-card.ma-accueil-card--missions .ma-accueil-card-icon {
	background: var(--aca-yellow-glow);
}
.ma-accueil-card.ma-accueil-card--shop .ma-accueil-card-icon {
	background: var(--aca-cyan-glow);
}
.ma-accueil-card.ma-accueil-card--title .ma-accueil-card-icon {
	background: var(--aca-purple-glow);
}
.ma-accueil-card.ma-accueil-card--arena .ma-accueil-card-icon {
	background: var(--aca-pink-glow);
}

/* v3.51.0 — Bottom nav mobile sticky. Apparaît <600px, double les tabs en bas
   pour navigation pouce-friendly. Le nav haut reste affiché aussi (cohérence). */
@media (max-width: 600px) {
	.ma-zone-tabs {
		position: sticky;
		top: 0;
		z-index: 18;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		background: rgba(245,245,247,0.92);
	}
	body.aca-mon-academie-fullscreen { padding-bottom: 80px !important; }
	.ma-root::after {
		content: '';
		display: block;
		height: 80px;
	}
}

/* v3.51.0 — Achievement banner (déblocage récent, 1 vue) */
.ma-achievement-banner {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	margin: 0 0 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255,212,0,0.30), rgba(168,85,247,0.30), rgba(0,229,255,0.30));
	border: 2px solid rgba(255,212,0,0.50);
	animation: ab-glow 3s ease-in-out infinite;
}
@keyframes ab-glow {
	0%, 100% { box-shadow: 0 0 12px rgba(255,212,0,0.30); }
	50%      { box-shadow: 0 0 24px rgba(255,212,0,0.60); }
}
.ma-ab-icon { font-size: 28px; line-height: 1; }
.ma-ab-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ma-ab-body strong { font-size: 14px; }
.ma-ab-body span { font-size: 13px; opacity: 0.9; font-style: italic; }

/* v3.52.0 — Top 5 clickable (cursor pointer + transition) */
.ma-top5-item--clickable {
	width: 100%;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .15s, background .15s;
}
.ma-top5-item--clickable:hover {
	transform: translateY(-2px);
	background: rgba(0,0,0,0.04);
}
.ma-top5-item--clickable:focus { outline: 2px solid var(--aca-pink, #ff2d87); outline-offset: 2px; }

/* v3.52.0 — Tour spotlight first-login */
.ma-tour {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s;
}
.ma-tour-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.70);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.ma-tour-card {
	position: relative;
	max-width: 480px;
	width: calc(100% - 32px);
	background: #ffffff;
	color: var(--aca-text);
	border-radius: 18px;
	padding: 24px;
	border: 2px solid var(--aca-pink);
	box-shadow: 0 16px 48px rgba(0,0,0,0.15);
	animation: tour-pop 0.4s ease-out;
}
@keyframes tour-pop {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}
.ma-tour-title {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-yellow, #ffd400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-tour-step {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 18px;
	min-height: 60px;
}
.ma-tour-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ma-tour-progress {
	font-size: 12px;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
	flex: 1;
}
.ma-tour-btn-skip, .ma-tour-btn-next {
	border: 0;
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s;
}
.ma-tour-btn-skip {
	background: rgba(0,0,0,0.04);
	color: #fff;
}
.ma-tour-btn-next {
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	color: #fff;
}
.ma-tour-btn-skip:hover, .ma-tour-btn-next:hover { transform: translateY(-1px); }

/* v3.53.0 — Leaderboard amis BuddyBoss */
.ma-leaderboard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}
.ma-lb-row {
	display: grid;
	grid-template-columns: auto 36px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(0,0,0,0.02);
	transition: background .15s;
}
.ma-lb-row:hover { background: rgba(0,0,0,0.04); }
.ma-lb-row--self {
	background: linear-gradient(135deg, rgba(255,212,0,0.18), rgba(255,45,135,0.18));
	border: 1px solid rgba(255,212,0,0.40);
	font-weight: 700;
}
.ma-lb-rank {
	font-weight: 800;
	font-size: 16px;
	min-width: 32px;
	text-align: center;
	background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-lb-row--self .ma-lb-rank { color: var(--aca-yellow, #ffd400); -webkit-text-fill-color: var(--aca-yellow, #ffd400); }
.ma-lb-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(0,0,0,0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.ma-lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ma-lb-name {
	font-size: 14px;
}
.ma-lb-stats {
	font-size: 12px;
	opacity: 0.85;
	white-space: nowrap;
	text-align: right;
}
.ma-lb-stats strong { font-size: 14px; }
.ma-lb-level { opacity: 0.75; }
@media (max-width: 480px) {
	.ma-lb-row { grid-template-columns: auto 32px 1fr; }
	.ma-lb-stats { grid-column: 2 / -1; text-align: left; padding-left: 42px; }
}

/* v3.53.0 — Hero status row + XP today */
.ma-hero-status-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 8px;
}
.ma-hero-xp-today {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(46,204,113,0.20), rgba(0,229,255,0.20));
	border: 1px solid rgba(46,204,113,0.40);
	font-size: 12px;
	font-weight: 700;
	color: #2ecc71;
}

/* ─────────────────────────────────────────────────────────────────────
   v3.54.0 — Card unification (.ma-card base) + Hero compact mode
   ───────────────────────────────────────────────────────────────────── */

/* Base card : tous les conteneurs « card » du dashboard partagent ces tokens.
   Variantes existantes (.ma-stat, .ma-stat-card, .ma-accueil-card, .ma-shop-item,
   .ma-top5-item, .ma-lb-row, .ma-streak-card) restent compatibles via overrides.
   Nouvelles cards : ajouter .ma-card pour récupérer le baseline.
*/
.ma-card {
	background: var(--aca-bg-2);
	border: 1px solid var(--aca-border);
	border-radius: var(--aca-radius-sm);
	padding: 14px 16px;
	position: relative;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ma-card:hover { transform: translateY(-1px); }
.ma-card--accent::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--aca-pink), var(--aca-purple));
	border-top-left-radius: var(--aca-radius-sm);
	border-top-right-radius: var(--aca-radius-sm);
}

/* ─── Compact hero mode : actif sur tous les tabs sauf « accueil » ─── */
/* Idée : le hero plein affiche tout (avatar 96px, niveau+XP bar+Pierres
   en stats, status badge). Sur les autres tabs, on passe en bandeau
   compact ~76px : avatar 56px, name + (Niveau X · 1234 XP · 567 💎) en
   chips inline, stats grid masquée, gradients allégés. */

.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero {
	padding: 14px 20px;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero::before,
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero::after {
	display: none;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-inner {
	gap: 12px;
	align-items: center;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-avatar {
	width: 48px;
	height: 48px;
	border-width: 2px;
	font-size: 1.25rem;
	box-shadow: 0 0 12px var(--aca-yellow-glow);
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-name {
	font-size: 1.05rem;
	margin: 0;
	line-height: 1.2;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-title,
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-status,
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-xp-today {
	display: none;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-status-row {
	margin-top: 0;
}

/* Stats : remplacé par mini-chips compactes côté droit du hero compact.
   On masque la grille stats classique et on injecte les valeurs via
   ::after sur ma-hero-inner ? Plus propre : afficher les chips via le
   markup existant en flex-wrap horizontal sous le name. */
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stats {
	display: flex;
	gap: 8px;
	padding: 0 20px 12px;
	background: transparent;
	border-bottom: 1px solid var(--aca-border);
	flex-wrap: wrap;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stat {
	flex: 0 1 auto;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0,0,0,0.02);
	border: 1px solid var(--aca-border);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	overflow: visible;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stat::before {
	display: none;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stat-label {
	font-size: 0.65rem;
	margin: 0;
	letter-spacing: 0.06em;
	color: var(--aca-text-muted);
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stat-value {
	font-size: 0.95rem;
	margin: 0;
}
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stat-sub,
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-xp-bar {
	display: none;
}

/* Mini-bar quickbar : reste visible mais légèrement compactée */
.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-quickbar {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Mobile : encore plus serré */
@media (max-width: 600px) {
	.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero {
		padding: 10px 14px;
	}
	.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-avatar {
		width: 40px; height: 40px; border-width: 2px;
		font-size: 1rem;
	}
	.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-hero-name {
		font-size: 0.95rem;
	}
	.ma-root[data-active-tab]:not([data-active-tab="accueil"]) .ma-stats {
		padding: 0 14px 10px;
	}
}

/* ─── Streak section quand affiché dans le tab Stats ─── */
.ma-streak-section--in-stats {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--aca-border);
}
.ma-streak-section--in-stats .ma-stats-subtitle {
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   v3.59.0 — Magasin : épingles user (1 avatar + 1 titre max)
   ───────────────────────────────────────────────────────────────────── */

/* Section "Mes épingles" en haut du tab Magasin. */
.ma-shop-pinned {
	margin: 0 0 18px;
	padding: 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 212, 0, 0.10), rgba(255, 45, 135, 0.08));
	border: 1px solid rgba(255, 212, 0, 0.35);
}
.ma-shop-pinned-title {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 800;
}
.ma-shop-pinned-help {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--aca-text-dim);
}
.ma-shop-grid--pinned {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}

/* Subtitle "Items du jour" pour clarifier la séparation. */
.ma-shop-daily-subtitle {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--aca-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Compactage carousel daily : items un peu plus serrés pour faire room à la
   rangée d'épingles ci-dessus. ~12% de gain vertical. */
.ma-shop-grid {
	gap: 10px;
}
.ma-shop-card {
	padding: 8px;
}

/* Bouton épingle en coin haut-droit de chaque card. */
.ma-shop-card { position: relative; }
.ma-pin-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
	opacity: 0.55;
	filter: grayscale(0.7);
}
.ma-pin-btn:hover {
	opacity: 1;
	transform: scale(1.1);
	background: rgba(255, 255, 255, 0.95);
}
.ma-pin-btn--active {
	opacity: 1;
	filter: none;
	background: linear-gradient(135deg, var(--aca-yellow, #ffd400), var(--aca-pink, #ff2d87));
	border-color: var(--aca-yellow, #ffd400);
	box-shadow: 0 0 10px rgba(255, 212, 0, 0.55);
}
.ma-pin-btn--active:hover {
	transform: scale(1.12) rotate(-8deg);
}
.ma-pin-btn:focus-visible {
	outline: 2px solid var(--aca-cyan, #00e5ff);
	outline-offset: 2px;
}
.ma-pin-btn[disabled] { opacity: 0.3; cursor: not-allowed; }

/* Variante card épinglée (highlight subtil pour les distinguer). */
.ma-shop-card--pinned {
	box-shadow: 0 0 0 1px rgba(255, 212, 0, 0.45), 0 4px 12px rgba(255, 212, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.ma-pin-btn { transition: none; }
	.ma-pin-btn:hover, .ma-pin-btn--active:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   v3.58.0 — Card unification (token harmonization)
   v3.78.3 — Branchée sur tokens --aca-card-* (déclarés .ma-root header)
   ─────────────────────────────────────────────────────────────────────
   Tous les conteneurs « card » du dashboard utilisent maintenant les MÊMES
   tokens : --aca-card-bg, --aca-card-border, --aca-card-radius, --aca-card-
   transition. Les modifiers de chaque variant (gradient streak, ::before
   accent stat-xp/pierres, grid leaderboard, accent border lb-row--self)
   restent intacts grâce à la spécificité plus élevée des sélecteurs
   combinés. Override possible cross-plugin via redéfinition des tokens.

   Variantes harmonisées :
   - .ma-stat-card       (Stats tab grid : XP/Pierres/Niveau/Matchs/...)
   - .ma-accueil-card    (Dashboard cards Accueil contextuel)
   - .ma-ql-card         (QuickLinks - legacy section)
   - .ma-top5-item       (Top 5 titres atteignables)
   - .ma-lb-row          (Leaderboard amis)
   - .ma-card            (Base utilitaire générique)

   PAS harmonisées (conservent leur look unique premium) :
   - .ma-stat            (hero stats : gradient accent vif)
   - .ma-shop-card       (magasin : aspect ratio + visuel large)
   - .ma-streak-card     (gradient flame + jaune)
*/

/* v3.78.3 — Unification branchée sur tokens --aca-card-* (déclarés .ma-root).
   Aucun changement visuel : les valeurs précédentes sont devenues les tokens. */
/* Note v3.82.0 : .ma-accueil-card a ses propres tokens enhanced (shadow, animation),
   il n'est plus dans cette liste d'unification pour éviter les conflits. */
.ma-stat-card,
.ma-ql-card,
.ma-top5-item,
.ma-lb-row,
.ma-card {
	background: var(--aca-card-bg);
	border: var(--aca-card-border);
	border-radius: var(--aca-card-radius);
	transition: var(--aca-card-transition), box-shadow var(--aca-motion-base) ease;
}

/* Hover unifié : tous les éléments clickables remontent légèrement +
   éclaircissent. Surcharge uniforme des hovers individuels précédents.
   Note v3.82.0 : .ma-accueil-card a son propre hover enhanced (shadow lift),
   donc il est exclu du hover unifié pour éviter les conflits. */
.ma-stat-card:hover,
.ma-ql-card:hover,
.ma-top5-item:hover,
.ma-lb-row:hover,
.ma-card:hover {
	transform: var(--aca-card-lift-hover);
	background: var(--aca-card-bg-hover);
	border-color: rgba(0, 0, 0, 0.10);
}

/* La row « self » du leaderboard garde son highlight gold→pink + override
   border qui passe au-dessus de l'unification. */
.ma-lb-row--self {
	background: linear-gradient(135deg, rgba(255, 212, 0, 0.18), rgba(255, 45, 135, 0.18));
	border-color: rgba(255, 212, 0, 0.40);
}
.ma-lb-row--self:hover {
	background: linear-gradient(135deg, rgba(255, 212, 0, 0.24), rgba(255, 45, 135, 0.24));
	border-color: rgba(255, 212, 0, 0.55);
}

/* Reduced motion : désactive toutes les animations v3.82.0 */
@media (prefers-reduced-motion: reduce) {
	.ma-stat-card,
	.ma-accueil-card,
	.ma-ql-card,
	.ma-top5-item,
	.ma-lb-row,
	.ma-card,
	.ma-activity-item {
		transition: background .15s ease, border-color .15s ease;
	}
	.ma-stat-card:hover,
	.ma-accueil-card:hover,
	.ma-ql-card:hover,
	.ma-top5-item:hover,
	.ma-lb-row:hover,
	.ma-card:hover,
	.ma-activity-item:hover {
		transform: none;
	}
	.ma-accueil-card,
	.ma-hero-status {
		animation: none !important;
	}
	.ma-avatar {
		animation: none;
	}
	.ma-xp-bar-fill {
		animation: none;
		transition: width .3s ease-out;
	}
	.ma-accueil-card.ma-accueil-card--streak .ma-accueil-card-icon {
		animation: none;
	}
}