/*!
 * Copyright (c) 2024-2026 Entreprises Miron & Co. All rights reserved.
 * Mon Académie — Dashboard élève AcadémieCo
 * v3.85.0 — NASA Punk (palette rétro NASA : worm red / orange / gold / navy sur blanc cassé)
 */

.ma-root {
	/* ─── Tokens (NASA Punk v3.85.0)
	   Les NOMS de tokens restent --aca-pink/--aca-cyan/etc. pour ne pas casser
	   les 2500 lignes qui les consomment ; seules les VALEURS migrent :
	   pink→worm red · blue→navy · yellow→gold · cyan→orange · purple→navy clair ─── */
	/* v3.90.0 — Tokens NASApunk Light (recette officielle Commerce-9, alignée
	   espace parent + Landing). Papier + navy + bande tricolore, FLAT, zéro neon.
	   Les NOMS restent (--aca-pink/cyan/etc.) pour ne pas casser les 2500 lignes. */
	--aca-bg-deep:     #F4F5F7;
	--aca-bg-1:        #F4F5F7;
	--aca-bg-2:        #FFFFFF;
	--aca-border:      rgba(27, 42, 71, 0.08);
	--aca-border-1:    rgba(27, 42, 71, 0.14);
	--aca-navy-deep:   #1B2A47;  /* encre / panneaux sombres (héros) */
	--aca-tricolor:    linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, #D8A953 66.66% 100%);

	--aca-pink:        #C32136;  /* rouge (Immersif) — accent primaire */
	--aca-pink-glow:   rgba(195, 33, 54, 0.10);
	--aca-blue:        #314B7A;  /* navy accent */
	--aca-blue-2:      #3C5A91;  /* navy hover */
	--aca-yellow:      #D8A953;  /* or (Club) ; sur clair pour texte = #A87F2F (AA) */
	--aca-yellow-text: #A87F2F;  /* or lisible sur fond clair */
	--aca-yellow-glow: rgba(216, 169, 83, 0.14);
	--aca-cyan:        #DF5F35;  /* orange (Initiative) (ex-cyan) */
	--aca-cyan-glow:   rgba(223, 95, 53, 0.12);
	--aca-purple:      #46598a;  /* navy clair (ex-purple) */
	--aca-purple-glow: rgba(70, 89, 138, 0.12);
	--aca-green:       #3e7d52;  /* vert mission assourdi (succès) */
	--aca-green-glow:  rgba(62, 125, 82, 0.12);

	--aca-text:        #1B2A47;  /* encre navy */
	--aca-text-dim:    rgba(27, 42, 71, 0.72);
	/* v3.114.0 — 0.50 donnait 3.04:1 sur blanc et 3.00:1 sur une carte survolée,
	   sous le seuil AA de 4.5. Mesuré sur les 14 usages : 12 sont du texte de
	   10 à 16 px que l'enfant DOIT lire (étiquettes de stats, états vides,
	   heures d'activité, jalons de série). 0.65 est la plus petite opacité qui
	   passe sur les DEUX fonds : 4.65:1 sur blanc, 4.58:1 sur #FAFAFA. */
	--aca-text-muted:  rgba(27, 42, 71, 0.65);

	--aca-radius:      18px;
	--aca-radius-sm:   12px;
	--aca-font:        -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
	--aca-mono:        ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--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) — NASA stripes */
	--aca-card-accent-height:    3px;
	--aca-card-accent-xp:        linear-gradient(90deg, var(--aca-pink), var(--aca-cyan));
	--aca-card-accent-pierres:   linear-gradient(90deg, var(--aca-yellow), var(--aca-cyan));
	--aca-card-accent-arena:     linear-gradient(90deg, var(--aca-blue), var(--aca-pink));

	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-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) ─── */
/* v3.90.0 — NASApunk Light : héros = panneau navy encre + texte blanc + bande
   tricolore (rouge/orange/or) en tête. FLAT, zéro glow. */
.ma-hero {
	position: relative;
	padding: 34px 24px 40px;
	background: var(--aca-navy-deep);
	color: #ffffff;
	border-bottom: 0;
	overflow: hidden;
}
.ma-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: var(--aca-tricolor);
	pointer-events: none;
}
.ma-hero::after {
	content: '';
	position: absolute;
	bottom: -40%; left: -10%;
	width: 400px; height: 400px;
	background: radial-gradient(circle, #ffffff 0%, transparent 60%);
	opacity: 0.05;
	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: var(--aca-blue);
	border: 3px solid rgba(255, 255, 255, 0.18);
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: 900;
	color: #fff;
	flex-shrink: 0;
	overflow: hidden;
}
.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: #ffffff;
}
/* v3.85.0 — Titre équipé façon "call sign" télémétrie NASA (or sur navy) */
.ma-hero-title {
	font-size: 0.74rem;
	color: var(--aca-yellow);
	font-family: var(--aca-mono);
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/* ─── 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-pink), var(--aca-cyan)); }
.ma-stat-pierres::before { background: linear-gradient(90deg, var(--aca-yellow), var(--aca-cyan)); }
.ma-stat-label {
	font-size: 0.68rem;
	color: var(--aca-text-muted);
	font-family: var(--aca-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	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%;
	/* v3.85.0 — worm gradient rouge→orange, signature NASA */
	background: linear-gradient(90deg, var(--aca-pink), var(--aca-cyan), var(--aca-pink));
	background-size: 200% 100%;
	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;
}
/* v3.85.0 — NASA : titre navy solide (fini le gradient-text rose→jaune) */
.ma-section-title span {
	color: var(--aca-blue);
}
/* v3.100.0 — Phrase de bienvenue rotative (« le savais-tu » du retour) */
.ma-welcome-phrase {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: -2px 0 18px;
	padding: 12px 15px;
	border-radius: 14px;
	background: #edfbff;
	border: 1px solid rgba(0, 174, 205, 0.28);
	font-size: 0.97rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--aca-blue, #143050);
}
.ma-welcome-spark {
	flex: 0 0 auto;
	font-size: 1.05rem;
	line-height: 1.5;
}
.ma-welcome-text { flex: 1 1 auto; }
.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(62, 125, 82, 0.1), rgba(222, 98, 52, 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(62, 125, 82, 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(212, 162, 76, 0.1);
	padding: 4px 10px;
	border-radius: 20px;
	border: 1px solid rgba(212, 162, 76, 0.3);
}

.ma-streak-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(135deg, rgba(195, 33, 53, 0.15), rgba(212, 162, 76, 0.12));
	border: 1px solid rgba(212, 162, 76, 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(212, 162, 76, 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(62, 125, 82, 0.15), rgba(222, 98, 52, 0.15));
	border-color: var(--aca-green);
	color: var(--aca-text);
}

.ma-streak-day.current {
	background: linear-gradient(135deg, var(--aca-yellow), #de6234);
	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(212, 162, 76, 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, #d4a24c, #de6234);
	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(195,33,53,0.2), rgba(74,95,135,0.2)); }
.ma-ql-parent { background: linear-gradient(135deg, rgba(222,98,52,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. */
/* v3.85.0 — Barre d'onglets NASA Punk : console de mission.
   Conteneur blanc net, onglet actif navy plein avec liseré worm red,
   labels uppercase mono façon télémétrie. Fix au passage : l'ancien
   hover mettait color:#fff sur fond clair → label invisible. */
.ma-zone-tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 14px 0 14px;
	padding: 5px;
	background: #ffffff;
	border: 1px solid rgba(26, 34, 51, 0.10);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(26, 34, 51, 0.05);
	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-family: var(--aca-mono);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	border-radius: 8px;
	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(49, 75, 123, 0.07);
	color: var(--aca-blue);
}
.ma-zone-tab:focus-visible {
	outline: 2px solid var(--aca-cyan);
	outline-offset: 2px;
}
.ma-zone-tab.active {
	background: var(--aca-blue);
	color: #fff;
	box-shadow: 0 5px 16px rgba(49, 75, 123, 0.32);
}
/* v3.90.0 — Direction A « Console » : indicateur worm red en tête de l'onglet
   actif (remplace l'ancien rail inférieur). Rescopé .ma-root + !important sur la
   COULEUR (comme les 3 barres) : un thème peut cibler ::before des boutons, donc
   on durcit aussi cet indicateur. La géométrie (notre pseudo) reste sans !important. */
.ma-root .ma-zone-tabs .ma-zone-tab.active::before {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 13px;
	right: 13px;
	height: 3px;
	border-radius: 3px;
	background: var(--aca-tricolor) !important;
}
.ma-zone-tab.active:hover {
	background: var(--aca-blue-2);
	color: #fff;
	transform: translateY(-1px);
}
.ma-zone-tab-icon {
	font-size: 15px;
	line-height: 1;
}
.ma-zone-tab-label {
	font-size: 11.5px;
	line-height: 1;
}

/* v3.88.0 — Durcissement anti-override thème/BuddyBoss.
   En prod, le thème (ou BuddyBoss) force un fond BLEU sur les boutons/liens, ce
   qui écrasait `background: transparent` des onglets inactifs → ils sortaient en
   tuiles bleues au lieu de transparent-sur-blanc (régression signalée par Pat).
   On rescope sous .ma-root avec assez de spécificité + !important CIBLÉ sur les
   seules propriétés en conflit (fond + couleur), sans toucher au layout/typo.
   C'est l'usage légitime de !important : battre un CSS tiers qu'on ne contrôle pas. */
.ma-root .ma-zone-tabs { background: #ffffff !important; }
.ma-root .ma-zone-tabs .ma-zone-tab {
	background: transparent !important;
	color: var(--aca-text-dim) !important;
	border: 0 !important;
	box-shadow: none !important;
}
.ma-root .ma-zone-tabs .ma-zone-tab:hover {
	background: rgba(49, 75, 123, 0.07) !important;
	color: var(--aca-blue) !important;
}
.ma-root .ma-zone-tabs .ma-zone-tab.active {
	background: var(--aca-blue) !important;
	color: #fff !important;
	box-shadow: 0 5px 16px rgba(49, 75, 123, 0.32) !important;
}
.ma-root .ma-zone-tabs .ma-zone-tab.active:hover {
	background: var(--aca-blue-2) !important;
	color: #fff !important;
}
/* L'icône et le label héritent de la couleur de l'onglet (sinon le thème peut
   re-colorer le texte par-dessus). */
.ma-root .ma-zone-tabs .ma-zone-tab .ma-zone-tab-icon,
.ma-root .ma-zone-tabs .ma-zone-tab .ma-zone-tab-label { color: inherit !important; }

/* v3.89.0 — Suite du durcissement anti-override (titres + icônes décoratives).
   Régressions prod signalées par Pat : (1) le thème force text-transform:uppercase
   sur les titres hérités (h1-h6), (2) il colle un fond/contour BLEU (sa couleur de
   lien) sur les spans d'icône emoji décoratifs (aria-hidden), qui sortent en
   « carrés bleus ». On neutralise CIBLÉ, scopé .ma-root, SANS toucher :
   - aux labels volontairement en capitales (classes .ma-*-label, non h1-h6) ;
   - aux icônes à fond INTENTIONNEL (.ma-accueil-card-icon = glow pink/gold/orange) ;
   - à l'icône de monnaie (.ma-pierres-icon, rendue en image).
   À confirmer sur screenshot prod (pas de runtime WP en local). */
.ma-root h1, .ma-root h2, .ma-root h3,
.ma-root h4, .ma-root h5, .ma-root h6 {
	text-transform: none !important;
}
.ma-root .ma-ab-icon,
.ma-root .ma-srb-icon,
.ma-root .ma-view-as-icon,
.ma-root .ma-nav-icon,
.ma-root .ma-parent-icon,
.ma-root .ma-pin-bubble-icon,
.ma-root .ma-ql-icon,
.ma-root .ma-ql-card-icon {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.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(222,98,52,0.12), rgba(212,162,76,0.12));
}
.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(195,33,53,0.12), rgba(49,75,123,0.12)); }
.ma-ql-card.ma-ql-parent { background: linear-gradient(135deg, rgba(222,98,52,0.12), rgba(212,162,76,0.12)); }
.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, #c32135), var(--aca-purple, #4a5f87));
	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, #c32135), var(--aca-purple, #4a5f87));
	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(212,162,76,0.12), rgba(74,95,135,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, #c32135), var(--aca-purple, #4a5f87));
	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: var(--aca-pink);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	box-shadow: none;
	transition: opacity .25s ease, transform .25s ease;
	transform-origin: center;
}
.ma-zone-tab.active .ma-zone-tab-badge {
	background: rgba(255,255,255,0.18);
	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(195,33,53,0.40); }
	50%      { box-shadow: 0 2px 12px rgba(195,33,53,0.70); }
}
@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)
   v3.90.0 — Direction A « Console » : bandeau navy + liseré OR à gauche (sémantique
   supervision parent), texte/contrôles mono blancs. Cohérent avec onglets+raccourcis. */
.ma-view-as-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 15px;
	margin: 0 0 14px;
	border-radius: 12px;
	background: var(--aca-blue);
	color: #fff;
	border-left: 3px solid var(--aca-yellow);
	flex-wrap: wrap;
	position: sticky;
	top: 8px;
	z-index: 20;
}
.ma-view-as-icon { font-size: 18px; line-height: 1; }
.ma-view-as-label { flex: 1; font-size: 13px; min-width: 160px; }
/* Gold éclairci (#e6bd6e ≈ 4.9:1 sur navy) : le --aca-yellow standard (#d4a24c)
   ne donne que 3.74:1 sur le bandeau navy, sous le seuil AA 4.5:1. Le nom de
   l'enfant supervisé est une info signifiante → on garde un or lisible. Token
   global inchangé (variante locale on-navy seulement). */
.ma-view-as-label strong { color: #e6bd6e; }
.ma-view-as-exit-form { margin: 0; }
.ma-view-as-exit-btn {
	padding: 7px 13px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-family: var(--aca-mono);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.ma-view-as-exit-btn:hover { background: var(--aca-pink); border-color: var(--aca-pink); }

/* 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,255,255,0.3);
	border-radius: 8px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-family: var(--aca-mono);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	max-width: 220px;
	appearance: auto;
}
.ma-view-as-switch-select:hover,
.ma-view-as-switch-select:focus-visible {
	background: rgba(255,255,255,0.2);
	border-color: var(--aca-yellow, #d4a24c);
	outline: none;
}
.ma-view-as-switch-select option {
	background: #ffffff;
	color: var(--aca-text);
}

/* v3.90.0 — Durcissement anti-override thème/BuddyBoss (bannière view-as).
   Le thème peut écraser fond/texte du bandeau et des contrôles. !important CIBLÉ
   scopé .ma-root sur les props écrasées, jamais le layout. */
.ma-root .ma-view-as-banner {
	background: var(--aca-blue) !important;
	color: #fff !important;
	border: 0 !important;
	border-left: 3px solid var(--aca-yellow) !important;
}
.ma-root .ma-view-as-banner .ma-view-as-label { color: #fff !important; }
.ma-root .ma-view-as-banner .ma-view-as-label strong { color: #e6bd6e !important; }
.ma-root .ma-view-as-exit-btn {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
	box-shadow: none !important;
}
.ma-root .ma-view-as-exit-btn:hover {
	background: var(--aca-pink) !important;
	border-color: var(--aca-pink) !important;
	color: #fff !important;
}
.ma-root .ma-view-as-switch-select {
	background: rgba(255,255,255,0.12) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.3) !important;
}
.ma-root .ma-view-as-switch-select option {
	background: #ffffff !important;
	color: var(--aca-text) !important;
}
@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, #de6234), var(--aca-blue-2, #3e5c92)); }
.ma-weekly-card--pierres::before { background: linear-gradient(90deg, var(--aca-yellow, #d4a24c), var(--aca-pink, #c32135)); }
.ma-weekly-card--arena::before   { background: linear-gradient(90deg, var(--aca-pink, #c32135), var(--aca-purple, #4a5f87)); }

.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: #3e7d52; 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, #c32135), var(--aca-purple, #4a5f87));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-weekly-card--xp .ma-weekly-card-value      { background: linear-gradient(135deg, var(--aca-cyan, #de6234), var(--aca-blue-2, #3e5c92)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ma-weekly-card--pierres .ma-weekly-card-value { background: linear-gradient(135deg, var(--aca-yellow, #d4a24c), var(--aca-pink, #c32135)); -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(212, 162, 76, 0.06), rgba(74, 95, 135, 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, #de6234), var(--aca-blue-2, #3e5c92)); }
.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, #4a5f87), var(--aca-pink, #c32135)); }
.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, #d4a24c), var(--aca-pink, #c32135)); }
.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, #3e7d52), var(--aca-cyan, #de6234)); }
.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(222, 98, 52, 0.04);
	border: 1px solid rgba(222, 98, 52, 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(222, 98, 52, 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;
}

/* v3.101.0 (chantier E) — Encart unique des sections verrouillées Co+.
   Ton chaleureux, pas un mur : accent OR (couleur du premium NASApunk Light),
   jamais de rouge d'erreur, jamais de cadenas barré. Aucun bouton d'achat :
   l'enfant est mineur, on l'oriente vers ses parents. */
.ma-social-locked {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--aca-yellow-glow, rgba(216, 169, 83, 0.14));
	border: 1px solid rgba(216, 169, 83, 0.34);
	position: relative;
	overflow: hidden;
}
.ma-social-locked::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--aca-yellow, #D8A953);
}
.ma-social-locked-icon {
	font-size: 1.45rem;
	line-height: 1.1;
	flex: 0 0 auto;
}
.ma-social-locked-body { min-width: 0; }
.ma-social-locked-title {
	margin: 0 0 5px;
	font-size: 1rem;
	font-weight: 800;
	color: var(--aca-text, #1B2A47);
}
.ma-social-locked-text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--aca-text-dim, rgba(27, 42, 71, 0.72));
}
.ma-social-locked-hint {
	margin: 7px 0 0;
	font-size: 0.86rem;
	font-weight: 700;
	/* REVUE ADVERSE v3.101.0 — PAS --aca-yellow-text (#A87F2F) ici. Sur le fond
	   crème de cet encart (rgba(216,169,83,.14) composité sur #F4F5F7, soit
	   rgb(240,234,224)) il ne donne que 3,06:1, sous le seuil WCAG AA de 4,5:1,
	   et 13,8 px gras n'atteint pas l'exception « grand texte ». Or plus foncé :
	   5,3:1. C'est la phrase qui dit à l'enfant quoi faire, elle doit se lire. */
	color: #7A5A22;
}
@media (max-width: 480px) {
	.ma-social-locked { padding: 14px 15px; gap: 11px; }
	.ma-social-locked-title { font-size: 0.95rem; }
}

/* 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(195, 33, 53, 0.06);
	border: 1px solid rgba(195, 33, 53, 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(195, 33, 53, 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, #c32135), var(--aca-purple, #4a5f87));
	-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(222,98,52,0.20); color: var(--aca-cyan, #de6234); }
.ma-top5-rarity.ma-rarity-epic { background: rgba(74,95,135,0.20); color: var(--aca-purple, #4a5f87); }
.ma-top5-rarity.ma-rarity-legendary { background: rgba(212,162,76,0.20); color: var(--aca-yellow, #d4a24c); }
.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, #c32135), var(--aca-yellow, #d4a24c));
	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, #d4a24c); }

/* 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(222,98,52,0.15), rgba(74,95,135,0.15));
	border: 1px solid rgba(222,98,52,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) */
/* v3.90.0 — Direction A « Console » : raccourcis = puces sœurs des onglets
   (mêmes mono/uppercase/rayon). Blanches à bord navy, hover qui inverse en navy
   plein ; déconnexion en worm red à droite. Cohérence onglets <-> raccourcis. */
.ma-quickbar {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	flex-wrap: wrap;
}
.ma-qb-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid rgba(49, 75, 123, 0.28);
	border-radius: 10px;
	background: #ffffff;
	color: var(--aca-blue);
	text-decoration: none;
	font-family: var(--aca-mono);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ma-qb-link:hover {
	background: var(--aca-blue);
	color: #fff;
	border-color: var(--aca-blue);
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(49, 75, 123, 0.26);
}
.ma-qb-link:focus-visible {
	outline: 2px solid var(--aca-cyan);
	outline-offset: 2px;
}
.ma-qb-link-logout {
	margin-left: auto;
	color: var(--aca-pink);
	border-color: rgba(195, 33, 53, 0.32);
}
.ma-qb-link-logout:hover {
	background: var(--aca-pink);
	color: #fff;
	border-color: var(--aca-pink);
	box-shadow: 0 5px 14px rgba(195, 33, 53, 0.26);
}
@media (max-width: 480px) {
	.ma-qb-lbl { display: none; }
	.ma-qb-link { padding: 9px 11px; }
}

/* v3.90.0 — Durcissement anti-override thème/BuddyBoss (raccourcis).
   Comme pour les onglets : en prod le thème force fond/texte bleu sur les <a>.
   On rescope sous .ma-root + !important CIBLÉ sur les seules props écrasées
   (fond, texte, bordure, ombre), jamais le layout/typo. */
.ma-root .ma-quickbar .ma-qb-link {
	background: #ffffff !important;
	color: var(--aca-blue) !important;
	border: 1px solid rgba(49, 75, 123, 0.28) !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.ma-root .ma-quickbar .ma-qb-link:hover {
	background: var(--aca-blue) !important;
	color: #fff !important;
	border-color: var(--aca-blue) !important;
	box-shadow: 0 5px 14px rgba(49, 75, 123, 0.26) !important;
}
.ma-root .ma-quickbar .ma-qb-link-logout {
	color: var(--aca-pink) !important;
	border-color: rgba(195, 33, 53, 0.32) !important;
}
.ma-root .ma-quickbar .ma-qb-link-logout:hover {
	background: var(--aca-pink) !important;
	color: #fff !important;
	border-color: var(--aca-pink) !important;
}
.ma-root .ma-quickbar .ma-qb-link .ma-qb-lbl { color: inherit !important; }

/* 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: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	animation: aca-badge-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* v3.96.0 (Vague B, décision Pat) — Rappel de série : doux et fermable, plus
   de pulsation « urgente » (retirée À LA SOURCE : plus de contre-ordre fragile
   plus bas dans le fichier qui pouvait se réactiver à la moindre réorganisation). */
.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(222,98,52,0.20), rgba(195,33,53,0.20));
	border: 1px solid rgba(222,98,52,0.40);
	flex-wrap: wrap;
}
.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, #c32135), #de6234);
	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: var(--aca-cyan-glow);
	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);
	}
	/* v3.96.0 (GO Pat, D8) — Spacer 80px retiré : il réservait l'espace d'une
	   bottom-nav jamais construite. La vraie barre du bas arrive avec la vague
	   Mon Académie (aperçu validé avant ship) et recréera son propre espace. */
}

/* v3.96.0 — Toggle du classement entre amis (Cette semaine / Depuis le début) */
.ma-lb-toggle {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
}
.ma-lb-toggle-btn {
	min-height: 44px; /* règle 44px (GO Pat, accessibilité doigts d'enfants) */
	padding: 8px 16px;
	border: 1px solid var(--aca-card-border, rgba(255,255,255,0.12));
	border-radius: 999px;
	background: var(--aca-card-bg, rgba(255,255,255,0.05));
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--aca-motion-fast, 120ms), border-color var(--aca-motion-fast, 120ms);
}
.ma-lb-toggle-btn:hover { background: var(--aca-card-bg-hover, rgba(255,255,255,0.09)); }
.ma-lb-toggle-btn.is-active {
	background: var(--aca-card-bg-elevated, rgba(255,255,255,0.12));
	border-color: var(--aca-pink, #ff2d87);
}
.ma-lb-toggle-btn:focus-visible {
	outline: 2px solid var(--aca-cyan, #00e5ff);
	outline-offset: 2px;
}
.ma-lb-badge-progress { font-size: 14px; }
.ma-lb-row--podium .ma-lb-rank { font-size: 18px; }

/* 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(212,162,76,0.30), rgba(74,95,135,0.30), rgba(222,98,52,0.30));
	border: 2px solid rgba(212,162,76,0.50);
	animation: ab-glow 3s ease-in-out infinite;
}
@keyframes ab-glow {
	0%, 100% { box-shadow: 0 0 12px rgba(212,162,76,0.30); }
	50%      { box-shadow: 0 0 24px rgba(212,162,76,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, #c32135); outline-offset: 2px; }

/* v3.97.0: Visite de bienvenue : spotlight ancré NASApunk Light + néon.
   Remplace l'ancien .ma-tour (carte centrée). Le JS (mon-academie.js) injecte
   .ma-visit dans body et pose le ring en position:fixed sur l'élément ancré ;
   la carte coach est amarrée au bas. Bimodale + Co+ résolus côté serveur. */
.ma-visit {
	position: fixed;
	inset: 0;
	z-index: 99999;
	transition: opacity .2s;
}
.ma-visit[hidden] { display: none; }
.ma-visit-ring {
	position: fixed;
	border-radius: 14px;
	box-shadow: 0 0 0 9999px rgba(27, 42, 71, 0.55),
	            0 0 0 3px var(--aca-cyan, #DF5F35),
	            0 0 22px rgba(223, 95, 53, 0.6);
	/* Position instantanée : le halo suit l'ancre sans traîner pendant le scroll.
	   Seule la taille s'anime (pas top/left, sinon effet de glissement du masque). */
	transition: width .25s ease, height .25s ease;
	pointer-events: none;
}
.ma-visit-ring.is-center {
	top: 50%; left: 50%; width: 0; height: 0;
	box-shadow: 0 0 0 9999px rgba(27, 42, 71, 0.62);
}
.ma-visit-coach {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	width: min(440px, calc(100% - 28px));
	background: #ffffff;
	color: var(--aca-text);
	border-radius: 18px;
	padding: 18px 18px 15px;
	box-shadow: 0 22px 54px rgba(27, 42, 71, 0.34);
	overflow: hidden;
	animation: ma-visit-pop 0.32s ease-out;
}
/* Quand le halo est dans le bas du viewport, la carte remonte en haut (JS toggle). */
.ma-visit-coach.is-top {
	top: calc(20px + env(safe-area-inset-top));
	bottom: auto;
}
@keyframes ma-visit-pop {
	from { opacity: 0; transform: translateX(-50%) translateY(12px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ma-visit-coach::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--aca-tricolor);
}
.ma-visit-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	padding: 3px 10px;
	border-radius: 999px;
	margin: 3px 0 9px;
}
.ma-visit-badge.is-free {
	color: #123021;
	background: rgba(62, 125, 82, 0.16);
	box-shadow: 0 0 10px rgba(62, 125, 82, 0.28);
}
.ma-visit-badge.is-co {
	color: #3a2b05;
	background: rgba(216, 169, 83, 0.24);
	box-shadow: 0 0 10px rgba(216, 169, 83, 0.4);
}
.ma-visit-title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.14;
	background: linear-gradient(135deg, var(--aca-pink, #C32136), #c24e1e);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-visit-title.is-co {
	background: linear-gradient(135deg, #8a6a26, #c24e1e);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-visit-body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--aca-text);
}
.ma-visit-ctl {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}
.ma-visit-prog {
	display: flex;
	gap: 5px;
	margin-right: auto;
	align-items: center;
}
.ma-visit-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(27, 42, 71, 0.16);
}
.ma-visit-dot.is-on {
	background: var(--aca-cyan, #DF5F35);
	box-shadow: 0 0 8px rgba(223, 95, 53, 0.8);
}
.ma-visit-dot.is-done { background: var(--aca-green, #3E7D52); }
.ma-visit-btn {
	border: 0;
	border-radius: 11px;
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .15s;
}
.ma-visit-skip {
	background: rgba(27, 42, 71, 0.07);
	color: var(--aca-text-dim);
}
.ma-visit-next {
	background: linear-gradient(135deg, var(--aca-pink, #C32136), var(--aca-cyan, #DF5F35));
	color: #fff;
	box-shadow: 0 8px 20px rgba(223, 95, 53, 0.34);
}
.ma-visit-btn:hover { transform: translateY(-1px); }
.ma-visit-btn:focus-visible { outline: 2px solid var(--aca-blue, #314B7A); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.ma-visit-ring { transition: none; }
	.ma-visit-coach { animation: none; }
	.ma-visit-btn:hover { transform: none; }
}
/* Contraste forcé (High Contrast Windows) : les titres en dégradé texte
   deviendraient invisibles (color:transparent). On rétablit une couleur système. */
@media (forced-colors: active) {
	.ma-visit-title, .ma-visit-title.is-co {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

/* 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(212,162,76,0.18), rgba(195,33,53,0.18));
	border: 1px solid rgba(212,162,76,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, #c32135), var(--aca-purple, #4a5f87));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ma-lb-row--self .ma-lb-rank { color: var(--aca-yellow, #d4a24c); -webkit-text-fill-color: var(--aca-yellow, #d4a24c); }
.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: rgba(46, 204, 113, 0.18);
	border: 1px solid rgba(46,204,113,0.40);
	font-size: 12px;
	font-weight: 700;
	color: #3e7d52;
}

/* ─────────────────────────────────────────────────────────────────────
   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(212, 162, 76, 0.10), rgba(195, 33, 53, 0.08));
	border: 1px solid rgba(212, 162, 76, 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, #d4a24c), var(--aca-pink, #c32135));
	border-color: var(--aca-yellow, #d4a24c);
	box-shadow: 0 0 10px rgba(212, 162, 76, 0.55);
}
.ma-pin-btn--active:hover {
	transform: scale(1.12) rotate(-8deg);
}
.ma-pin-btn:focus-visible {
	outline: 2px solid var(--aca-cyan, #de6234);
	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(212, 162, 76, 0.45), 0 4px 12px rgba(212, 162, 76, 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(212, 162, 76, 0.18), rgba(195, 33, 53, 0.18));
	border-color: rgba(212, 162, 76, 0.40);
}
.ma-lb-row--self:hover {
	background: linear-gradient(135deg, rgba(212, 162, 76, 0.24), rgba(195, 33, 53, 0.24));
	border-color: rgba(212, 162, 76, 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;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   v3.96.0 (Vague B) — Célébrations (toast + confetti) + rappel de série doux
   Décisions Pat 2026-07-18 : joyeux mais bref, fermable, jamais anxiogène.
   Durées et intensité : TUNING dans mon-academie.js. Couleurs : palette ACA.
   ───────────────────────────────────────────────────────────────────── */

/* Rappel de série : bouton fermer 44px (pulsation retirée à la source plus haut). */
.ma-srb-x {
	min-width: 44px;
	min-height: 44px;
	border: none;
	background: transparent;
	color: var(--aca-text-muted);
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px;
	align-self: flex-start;
	margin-left: auto;
}
.ma-srb-x:hover { background: rgba(27, 42, 71, 0.06); color: var(--aca-text); }

/* Toast : petit message coloré, auto-fermé, jamais bloquant. */
.ma-toast {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(92vw, 480px);
	padding: 10px 10px 10px 18px;
	border-radius: 14px;
	background: #ffffff;
	color: var(--aca-text, #1B2A47);
	border: 1px solid rgba(27, 42, 71, 0.14);
	box-shadow: 0 10px 30px rgba(27, 42, 71, 0.18);
	font-size: 14px;
	font-weight: 700;
	animation: ma-toast-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ma-toast--success { border-left: 5px solid var(--aca-green, #3E7D52); }
.ma-toast--error   { border-left: 5px solid var(--aca-pink, #C32136); }
.ma-toast.is-leaving { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity 240ms ease, transform 240ms ease; }
.ma-toast-msg { flex: 1; }
.ma-toast-x {
	min-width: 44px;
	min-height: 44px;
	border: none;
	background: transparent;
	/* v3.114.0 — le repli suit le token : 0.6 donnait 4.03:1, sous le seuil AA.
	   Un repli qui échoue est pire qu'une absence : il ne se voit que le jour
	   où le token manque, donc jamais pendant qu'on teste. */
	color: var(--aca-text-muted, rgba(27, 42, 71, 0.65));
	font-size: 15px;
	cursor: pointer;
	border-radius: 10px;
}
.ma-toast-x:hover { background: rgba(27, 42, 71, 0.06); color: var(--aca-text, #1B2A47); }
@keyframes ma-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Confetti : particules DOM légères, ~1 s, purgées ensuite. */
.ma-confetti {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
}
.ma-confetti-p {
	position: fixed;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	opacity: 0;
	animation: ma-confetti-fly 1100ms ease-out forwards;
}
@keyframes ma-confetti-fly {
	0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
	100% { opacity: 0; transform: translate(var(--cx, 60px), calc(var(--cy, -120px) + 220px)) rotate(var(--cr, 180deg)); }
}

/* Carte « Ton rang XP » (Cette semaine) : accent 90deg conforme. */
.ma-weekly-card--rank::before { background: linear-gradient(90deg, var(--aca-green, #3E7D52), var(--aca-yellow, #D8A953)); }
.ma-weekly-card-sub {
	font-size: 12px;
	color: var(--aca-text-muted);
	margin-top: 2px;
}

/* Carte « Réussite » (Mes nombres) : accent 90deg conforme. */
.ma-stat-card--hero.ma-stat-card--success::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--aca-yellow, #D8A953), var(--aca-green, #3E7D52)); }

/* ── v3.96.0 (Vague B, correctifs post-revue adverse) ─────────────────── */

/* [hidden] neutralisé par display:flex (même piège que .ma-zone-pane 1232) :
   sans ces règles, la bannière de série n'est PAS fermable et les 2 vues du
   classement entre amis s'affichent empilées. NE PAS retirer. */
.ma-streak-risk-banner[hidden],
.ma-leaderboard[hidden] { display: none !important; }

/* Focus clavier : le toast vit dans body (hors .ma-root), le :focus-visible
   global ne l'atteint pas. Littéraux obligatoires. */
.ma-toast-x:focus-visible,
.ma-srb-x:focus-visible { outline: 2px solid #DF5F35; outline-offset: 2px; }

/* Lisibilité AA : sous-texte carte rang, « Encore X » sur bouton désactivé,
   ✕ du rappel de série. */
.ma-weekly-card-sub { font-size: 13px; color: var(--aca-text-dim, rgba(27, 42, 71, 0.72)); }
.ma-shop-buy-btn:disabled .ma-shop-buy-cost,
.ma-shop-buy-btn-disabled .ma-shop-buy-cost { opacity: 1; color: var(--aca-text, #1B2A47); font-size: 12px; }
.ma-srb-x { color: var(--aca-text-dim, rgba(27, 42, 71, 0.72)); }

/* Une seule carte bulletin (Mes forces) : pleine largeur, fini la moitié vide. */
.ma-bulletin-rectangles { grid-template-columns: 1fr; }

/* La valeur de la carte rang suit son accent (vert-or), pas le défaut rose. */
.ma-weekly-card--rank .ma-weekly-card-value { background: linear-gradient(135deg, var(--aca-green, #3E7D52), var(--aca-yellow, #D8A953)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Toast : police du dashboard (body n'a pas --aca-font) + toujours au-dessus
   du tour first-login (z 9999). */
.ma-toast { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; z-index: 10001; }
.ma-confetti { z-index: 10000; }

/* Revue adverse (2e passe) — cartes magasin inabordables : l'opacité globale de
   la carte se multipliait à celle d'un ancêtre et retombait sous le seuil AA le
   fix « Encore X ». On ne grise plus que le visuel, pas le texte. */
.ma-shop-card-locked { opacity: 1; }
.ma-shop-card-locked .ma-shop-visual { opacity: 0.7; }

/* Label des cartes hebdo (dont « Ton rang XP ») : encre lisible (AA). */
.ma-weekly-card-lbl { color: var(--aca-text-dim, rgba(27, 42, 71, 0.72)); }

/* Focus visible dans la bannière de série : encre foncée (l'orange tombait
   sous 3:1 sur le fond orangé). */
.ma-streak-risk-banner :focus-visible { outline-color: var(--aca-text, #1B2A47); }

/* Toast sous la barre d'admin WP (parent en view_as avec toolbar). */
body.admin-bar .ma-toast { top: 50px; }

@media (prefers-reduced-motion: reduce) {
	.ma-toast, .ma-toast.is-leaving { animation: none; transition: opacity 240ms ease; transform: translateX(-50%); }
	.ma-confetti { display: none; }
	/* Bannière de déblocage (rendue affichable par le fix E1) : sa pulsation
	   ab-glow infinie n'était couverte par aucun bloc reduced-motion. */
	.ma-achievement-banner { animation: none; }
	.ma-weekly-card:hover { transform: none; }
}