/* HDC Royaume — composant "Mon Royaume"
   Repris sur la charte réelle du site (pas une palette à part) :
   cuivre #C06024 / cuivre foncé #9C3C24 (accent principal, boutons),
   encre #1A1A1A, fond blanc cassé #FAF8F5, bordures #E5E1DA.
   Police : héritée du thème (ne pas la forcer, sinon désynchro au moindre
   changement de typo site-wide). */

.hdc-royaume {
	--hdc-accent: #C06024;
	--hdc-accent-dark: #9C3C24;
	--hdc-ink: #1A1A1A;
	--hdc-ink-soft: rgba(26, 26, 26, 0.68);
	--hdc-surface: #FFFFFF;
	--hdc-surface-alt: #FAF8F5;
	--hdc-border: #E5E1DA;

	background: var(--hdc-surface-alt);
	color: var(--hdc-ink);
	border: 1px solid var(--hdc-border);
	border-radius: 14px;
	padding: 1.25rem;
	container-type: inline-size;
}

.hdc-royaume__h {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hdc-accent);
	margin: 0 0 0.75rem;
}

/* --- Scène : médaillon + reliques -------------------------------------- */

.hdc-royaume__scene {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.5rem;
	align-items: start;
}
@container (max-width: 620px) {
	.hdc-royaume__scene { grid-template-columns: 1fr; }
}

.hdc-royaume__medaillon {
	margin: 0;
	text-align: center;
	background:
		radial-gradient(circle at 50% 42%, rgba(192, 96, 36, 0.12), transparent 65%),
		var(--hdc-surface);
	border-radius: 16px;
	padding: 1.25rem 0.75rem 1rem;
	border: 1px solid var(--hdc-border);
}
.hdc-royaume__medaillon svg { width: min(180px, 100%); height: auto; }
.hdc-royaume__medaillon figcaption { display: grid; gap: 0.15rem; margin-top: 0.6rem; }
.hdc-royaume__nom {
	font-weight: 700;
	color: var(--hdc-ink);
	font-size: 1.1rem;
}
.hdc-royaume__titre {
	color: var(--hdc-accent);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Aura du Grand Œuvre — respectueuse de prefers-reduced-motion */
.av-aura circle { fill: none; stroke: var(--hdc-accent); stroke-width: 1.5; opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
	.est-grand-oeuvre .av-aura circle { animation: hdc-aura 4s ease-in-out infinite; transform-origin: 100px 118px; }
	.est-grand-oeuvre .av-aura circle:nth-child(2) { animation-delay: 2s; }
	@keyframes hdc-aura {
		0%, 100% { opacity: 0.22; transform: scale(0.97); }
		50% { opacity: 0.55; transform: scale(1.03); }
	}
	.av-fumee { animation: hdc-fumee 5s ease-in-out infinite; }
	@keyframes hdc-fumee { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
}

/* --- Reliques ----------------------------------------------------------- */

.hdc-royaume__reliques ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 0.75rem;
}

.relique {
	background: var(--hdc-surface);
	border: 1px solid var(--hdc-border);
	border-radius: 12px;
	padding: 0.85rem 1rem;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.relique:hover { box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06); }
.relique.est-possedee { border-color: var(--hdc-accent); box-shadow: inset 0 0 0 1px rgba(192, 96, 36, 0.3); }

/* ---- Rang du Royaume : échelle sans montants (seuils internes) ---- */
.rang-relique {
	background: var(--hdc-surface);
	border: 1px solid var(--hdc-border);
	border-radius: 12px;
	padding: 0.9rem 1rem;
	margin-bottom: 1.25rem;
}
.rang-nom {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--hdc-ink);
	line-height: 1.15;
	margin-bottom: 0.75rem;
}
.rang-echelle {
	list-style: none;
	display: flex;
	gap: 0.3rem;
	margin: 0 0 0.6rem;
	padding: 0;
}
.rang-palier {
	flex: 1;
	text-align: center;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(26, 26, 26, 0.4);
	padding-top: 0.45rem;
	border-top: 2px solid var(--hdc-border);
}
.rang-palier.est-passe {
	color: var(--hdc-ink-soft);
	border-top-color: rgba(192, 96, 36, 0.4);
}
.rang-palier.est-actuel {
	color: var(--hdc-accent);
	font-weight: 700;
	border-top-color: var(--hdc-accent);
}
.rang-quetes {
	margin: 0;
	font-size: 0.82rem;
	color: var(--hdc-ink-soft);
}

/* --- Cagnotte fidélité (en euros) ---------------------------------------- */

.cagnotte-relique {
	background: var(--hdc-surface);
	border: 1px solid var(--hdc-border);
	border-radius: 12px;
	padding: 0.9rem 1rem;
}
.cagnotte-relique.est-pleine { border-color: var(--hdc-accent); box-shadow: inset 0 0 0 1px rgba(192, 96, 36, 0.3); }
.cagnotte-montant {
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--hdc-ink);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.relique__tete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--hdc-ink);
}
.relique__serie {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--hdc-accent);
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.relique__note { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--hdc-ink-soft); }

.relique__progress { margin: 0.55rem 0 0; }
.relique__progress span {
	display: block;
	height: 5px;
	border-radius: 3px;
	background: var(--hdc-border);
	position: relative;
	overflow: hidden;
}
.relique__progress span::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--p, 0%);
	background: var(--hdc-accent);
	border-radius: 3px;
}
.relique__progress em { display: block; font-size: 0.78rem; font-style: normal; margin-top: 0.25rem; color: var(--hdc-ink-soft); }

/* Bouton "Équiper" (cosmétique, Mage) : discret, contour seulement. */
.relique__equiper {
	margin-top: 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--hdc-ink);
	background: transparent;
	color: var(--hdc-ink);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.relique__equiper[aria-pressed="true"] { background: var(--hdc-ink); color: #fff; }
.relique__equiper:focus-visible { outline: 2px solid var(--hdc-accent); outline-offset: 2px; }

/* Boutons CTA (action à mener pour débloquer une relique / utiliser la cagnotte) :
   même traitement que "Ajouter au panier" sur la boutique — plein, cuivre,
   généreux, avec un petit soulèvement au survol pour donner envie de cliquer. */
.relique__equiper.dispo {
	display: inline-block;
	margin-top: 0.65rem;
	padding: 0.6rem 1.15rem;
	border-radius: 10px;
	border: none;
	background: var(--hdc-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.relique__equiper.dispo:hover {
	background: var(--hdc-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(192, 96, 36, 0.32);
	color: #fff;
}
.relique__equiper.dispo:focus-visible { outline: 2px solid var(--hdc-accent-dark); outline-offset: 2px; }
.relique__equiper[disabled] {
	border-color: var(--hdc-border);
	color: var(--hdc-ink-soft);
	cursor: not-allowed;
}

/* --- Voile des non-Mages ------------------------------------------------- */

.hdc-royaume--voile .hdc-royaume__medaillon svg,
.hdc-royaume--voile .relique { filter: grayscale(0.85) opacity(0.75); }
.hdc-royaume--voile .hdc-royaume__medaillon { border-color: rgba(192, 96, 36, 0.35); }
.hdc-royaume__appel strong { color: var(--hdc-ink); }

/* --- Badge public sous les avis ------------------------------------------ */

.hdc-royaume-badge {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--hdc-accent);
	color: #fff;
	vertical-align: middle;
}