/*
 * IORESKILL Dashboard v0.7 — refonte complète
 * =============================================================
 * CSS dédié au dashboard (nouvelle charte violette).
 * Ne charge PAS sur les autres pages du parcours (inscription, tests, etc.)
 * pour éviter tout conflit avec onboarding.css.
 *
 * Structure :
 *   1. Design tokens (variables CSS)
 *   2. Reset / typo dashboard
 *   3. Layout global (sidebar + main)
 *   4. Sidebar
 *   5. Topbar
 *   6. Cards & composants génériques
 *   7. Vue "Mon parcours"
 *   8. Vue "Mes compétences"
 *   9. Vues placeholder
 *   10. Responsive
 */

/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */
.iore-dashboard {
	--iore-violet-deep:   #4a1f80;
	--iore-violet:        #6b2fb3;
	--iore-violet-light:  #8b52d1;
	--iore-violet-pale:   #f0e6ff;
	--iore-violet-tint:   #f8f5ff;

	--iore-text:          #1f1129;
	--iore-text-muted:    #6b5b7d;
	--iore-text-light:    #9a8ba8;

	--iore-bg:            #f8f5ff;
	--iore-card:          #ffffff;
	--iore-border:        #e8dfff;
	--iore-border-strong: #d1c1e8;

	--iore-success:       #27ae60;
	--iore-warning:       #e67e22;
	--iore-danger:        #d0334c;

	--iore-radius-sm:     6px;
	--iore-radius-md:     10px;
	--iore-radius-lg:     14px;
	--iore-radius-xl:     20px;

	--iore-shadow-sm:     0 1px 3px rgba(74,31,128,0.06);
	--iore-shadow-md:     0 4px 12px rgba(74,31,128,0.08);
	--iore-shadow-lg:     0 8px 24px rgba(74,31,128,0.12);

	--iore-font-heading:  'Bricolage Grotesque', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--iore-font-body:     'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--iore-sidebar-width: 260px;
}

/* ============================================================
 * 2. RESET / TYPO
 * ============================================================ */
.iore-dashboard,
.iore-dashboard * {
	box-sizing: border-box;
}
.iore-dashboard {
	font-family: var(--iore-font-body);
	color: var(--iore-text);
	background: var(--iore-bg);
	min-height: 100vh;
	margin: -20px -20px 0;
}
.iore-dashboard h1,
.iore-dashboard h2,
.iore-dashboard h3 {
	font-family: var(--iore-font-heading);
	color: var(--iore-violet-deep);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.iore-dashboard p { margin: 0 0 0.5rem; line-height: 1.55; }
.iore-dashboard a { color: var(--iore-violet); text-decoration: none; }
.iore-dashboard a:hover { color: var(--iore-violet-deep); text-decoration: underline; }
.iore-dashboard button { font-family: inherit; }

/* ============================================================
 * 3. LAYOUT GLOBAL
 * ============================================================ */
.iore-dashboard {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
}
@media (min-width: 1024px) {
	.iore-dashboard {
		grid-template-columns: var(--iore-sidebar-width) 1fr;
	}
}

.iore-main {
	min-width: 0; /* évite les overflow avec des grids enfants */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.iore-main__content {
	padding: 1.5rem 1.25rem 3rem;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.iore-main__content { padding: 2rem 2.5rem 4rem; }
}

.iore-section {
	margin-bottom: 1.5rem;
}
.iore-section:last-child { margin-bottom: 0; }

/* ============================================================
 * 4. SIDEBAR
 * ============================================================ */
.iore-sidebar {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: var(--iore-sidebar-width);
	background: linear-gradient(180deg, var(--iore-violet-deep) 0%, var(--iore-violet) 100%);
	color: #fff;
	z-index: 999;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 1.5rem 1rem;
}
.iore-sidebar[data-open="true"] {
	transform: translateX(0);
	box-shadow: var(--iore-shadow-lg);
}
@media (min-width: 1024px) {
	.iore-sidebar {
		transform: translateX(0);
	}
}

.iore-sidebar__scrim {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(31,17,41,0.5);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.iore-dashboard.is-sidebar-open .iore-sidebar__scrim {
	opacity: 1;
	pointer-events: auto;
}
@media (min-width: 1024px) {
	.iore-sidebar__scrim { display: none; }
}

.iore-sidebar__close {
	position: absolute;
	top: 0.75rem; right: 0.75rem;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0.4rem;
	border-radius: var(--iore-radius-sm);
	opacity: 0.85;
}
.iore-sidebar__close:hover { background: rgba(255,255,255,0.1); opacity: 1; }
@media (min-width: 1024px) {
	.iore-sidebar__close { display: none; }
}

.iore-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.6rem 1.5rem;
	font-family: var(--iore-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
}
.iore-sidebar__brand-icon { font-size: 1.5rem; line-height: 1; }
.iore-sidebar__brand-name { color: #fff; }

.iore-sidebar__nav { flex: 1; }
.iore-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
}
.iore-sidebar__section-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255,255,255,0.6);
	padding: 0 0.75rem 0.5rem;
	font-weight: 600;
}

.iore-sidebar__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.75rem;
	color: rgba(255,255,255,0.85);
	border-radius: var(--iore-radius-md);
	transition: background 0.15s ease, color 0.15s ease;
	font-size: 0.94rem;
	font-weight: 500;
	position: relative;
}
.iore-sidebar__item:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
	text-decoration: none;
}
.iore-sidebar__item.is-active {
	background: rgba(255,255,255,0.18);
	color: #fff;
	font-weight: 600;
}
.iore-sidebar__item.is-active::before {
	content: '';
	position: absolute;
	left: -1rem;
	top: 25%; bottom: 25%;
	width: 3px;
	background: #fff;
	border-radius: 0 2px 2px 0;
}
.iore-sidebar__item-icon {
	width: 20px; height: 20px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.iore-sidebar__item-icon svg { width: 100%; height: 100%; }
.iore-sidebar__item-label { flex: 1; }
.iore-sidebar__item-badge {
	background: var(--iore-warning);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 10px;
}
.iore-sidebar__item-soon {
	color: rgba(255,255,255,0.4);
	line-height: 0;
	margin-left: 0.35rem;
}

.iore-sidebar__footer {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.iore-sidebar__user {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1;
	min-width: 0;
}
.iore-sidebar__user-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}
.iore-sidebar__user-info { min-width: 0; }
.iore-sidebar__user-name {
	font-weight: 600;
	color: #fff;
	font-size: 0.92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.iore-sidebar__user-phase {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.65);
}
.iore-sidebar__logout {
	color: rgba(255,255,255,0.7);
	padding: 0.4rem;
	border-radius: var(--iore-radius-sm);
	line-height: 0;
}
.iore-sidebar__logout:hover {
	color: #fff;
	background: rgba(255,255,255,0.1);
	text-decoration: none;
}

/* ============================================================
 * 5. TOPBAR
 * ============================================================ */
.iore-topbar {
	background: var(--iore-card);
	padding: 1.25rem 1.25rem;
	border-bottom: 1px solid var(--iore-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
@media (min-width: 1024px) {
	.iore-topbar { padding: 1.5rem 2.5rem; }
}
.iore-topbar__title {
	font-size: 1.5rem;
	margin: 0 0 0.15rem;
}
.iore-topbar__subtitle {
	color: var(--iore-text-muted);
	font-size: 0.9rem;
	margin: 0;
}
.iore-topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.iore-topbar__action--icon {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--iore-violet-tint);
	color: var(--iore-violet-deep);
	transition: background 0.15s ease;
}
.iore-topbar__action--icon:hover {
	background: var(--iore-violet-pale);
	text-decoration: none;
}
.iore-topbar__menu-btn {
	position: absolute;
	top: 1rem; left: 1rem;
	background: var(--iore-card);
	border: 1px solid var(--iore-border);
	color: var(--iore-violet-deep);
	padding: 0.5rem;
	border-radius: var(--iore-radius-md);
	cursor: pointer;
	box-shadow: var(--iore-shadow-sm);
	z-index: 100;
}
@media (min-width: 1024px) {
	.iore-topbar__menu-btn { display: none; }
	.iore-topbar { padding-left: 2.5rem; }
}
@media (max-width: 1023px) {
	.iore-topbar__title-wrap { padding-left: 3rem; }
}

/* ============================================================
 * 6. CARDS & COMPOSANTS GÉNÉRIQUES
 * ============================================================ */
.iore-card {
	background: var(--iore-card);
	border: 1px solid var(--iore-border);
	border-radius: var(--iore-radius-lg);
	padding: 1.5rem;
	box-shadow: var(--iore-shadow-sm);
}
.iore-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.iore-card__eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.3px;
	color: var(--iore-violet-light);
	font-weight: 700;
	margin-bottom: 0.4rem;
}
.iore-card__title {
	font-size: 1.35rem;
	margin: 0;
}
.iore-card__lead {
	color: var(--iore-text);
	line-height: 1.6;
	margin: 0.75rem 0 0;
}
.iore-card__link {
	color: var(--iore-violet);
	font-weight: 600;
	font-size: 0.9rem;
}
.iore-card--highlight {
	background: linear-gradient(135deg, var(--iore-violet-tint) 0%, #fff 100%);
	border-color: var(--iore-violet-pale);
}

/* Boutons */
.iore-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--iore-radius-md);
	font-weight: 600;
	font-size: 0.95rem;
	border: 0;
	cursor: pointer;
	transition: all 0.15s ease;
	text-decoration: none;
	line-height: 1;
	font-family: inherit;
}
.iore-btn--primary {
	background: var(--iore-violet);
	color: #fff;
}
.iore-btn--primary:hover {
	background: var(--iore-violet-deep);
	color: #fff;
	text-decoration: none;
}
.iore-btn--ghost {
	background: transparent;
	color: var(--iore-violet-deep);
	border: 1.5px solid var(--iore-border-strong);
}
.iore-btn--ghost:hover {
	background: var(--iore-violet-tint);
	color: var(--iore-violet-deep);
	text-decoration: none;
}
.iore-btn--disabled {
	background: var(--iore-border);
	color: var(--iore-text-light);
	cursor: not-allowed;
	opacity: 0.75;
}
.iore-btn--disabled:hover {
	background: var(--iore-border);
	color: var(--iore-text-light);
}

/* Badges */
.iore-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
}
.iore-badge--success {
	background: rgba(39,174,96,0.12);
	color: #1f6e35;
}
.iore-badge--muted {
	background: var(--iore-violet-tint);
	color: var(--iore-violet-deep);
}
.iore-badge__dot {
	width: 8px; height: 8px;
	background: var(--iore-success);
	border-radius: 50%;
	display: inline-block;
}

/* Barres de progression */
.iore-progress-bar {
	height: 8px;
	background: var(--iore-border);
	border-radius: 4px;
	overflow: hidden;
}
.iore-progress-bar--thin { height: 6px; }
.iore-progress-bar__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--iore-violet-light), var(--iore-violet-deep));
	border-radius: inherit;
	transition: width 0.5s ease;
}

/* ============================================================
 * 7. VUE "MON PARCOURS"
 * ============================================================ */
.iore-welcome-banner {
	background: linear-gradient(135deg, var(--iore-violet) 0%, var(--iore-violet-deep) 100%);
	color: #fff;
	border-radius: var(--iore-radius-lg);
	padding: 2rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--iore-shadow-md);
}
.iore-welcome-banner__text { flex: 1; min-width: 0; }
.iore-welcome-banner__title {
	font-size: 1.8rem;
	color: #fff;
	margin: 0 0 0.4rem;
}
.iore-welcome-banner__lead {
	color: rgba(255,255,255,0.9);
	margin: 0;
	line-height: 1.55;
	font-size: 1rem;
}
.iore-welcome-banner__illustration {
	flex-shrink: 0;
	display: none;
}
@media (min-width: 720px) {
	.iore-welcome-banner__illustration { display: block; }
}

.iore-progress-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 720px) {
	.iore-progress-grid {
		grid-template-columns: 260px 1fr;
	}
}

.iore-progress-ring-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem 1rem;
}
.iore-progress-ring-card .iore-card__title {
	font-size: 0.95rem;
	color: var(--iore-text-muted);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
}
.iore-progress-ring { display: flex; justify-content: center; }
.iore-progress-ring-card__hint {
	color: var(--iore-text-muted);
	font-size: 0.9rem;
	margin: 1rem 0 0;
	font-weight: 500;
}

.iore-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
}
.iore-stat-card {
	text-align: center;
	padding: 1.5rem 1rem;
}
.iore-stat-card__icon {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.iore-stat-card__value {
	font-family: var(--iore-font-heading);
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--iore-violet-deep);
	line-height: 1;
}
.iore-stat-card__label {
	color: var(--iore-text-muted);
	font-size: 0.85rem;
	margin-top: 0.35rem;
}

/* Objectif Projets (adapté au thème violet) */
.iore-project-access {
	background: linear-gradient(135deg, var(--iore-violet-tint) 0%, #fff 60%);
}
.iore-project-access.is-unlocked {
	background: linear-gradient(135deg, rgba(39,174,96,0.06) 0%, #fff 60%);
	border-color: rgba(39,174,96,0.3);
}
.iore-project-access__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
}
@media (min-width: 900px) {
	.iore-project-access__layout {
		grid-template-columns: 1.3fr 1fr;
		gap: 2rem;
	}
}
.iore-project-access__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.3px;
	color: var(--iore-violet-light);
	font-weight: 700;
	margin-bottom: 0.4rem;
}
.iore-project-access__title {
	font-size: 1.4rem;
	margin: 0 0 0.5rem;
}
.iore-project-access__lead {
	color: var(--iore-text);
	line-height: 1.55;
	margin: 0;
}
.iore-project-access__right {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: stretch;
}
.iore-project-access__progress {
	background: var(--iore-card);
	border: 1px solid var(--iore-border);
	border-radius: var(--iore-radius-md);
	padding: 0.85rem 1rem;
}
.iore-project-access__progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
	font-size: 0.92rem;
	color: var(--iore-text-muted);
}
.iore-project-access__progress-head strong { color: var(--iore-violet-deep); font-weight: 700; }
.iore-project-access__hint {
	color: var(--iore-text-muted);
	font-size: 0.82rem;
	margin: 0.5rem 0 0;
}
.iore-project-access__locked-hint {
	color: var(--iore-text-muted);
	font-size: 0.82rem;
	font-style: italic;
	text-align: center;
	margin: 0.25rem 0 0;
}

/* DISC compact */
.iore-disc-compact__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 800px) {
	.iore-disc-compact__layout { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.iore-disc-compact__profiles {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.iore-disc-compact__profile {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.iore-disc-compact__label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--iore-text-muted);
	font-weight: 600;
}
.iore-disc-compact__name {
	font-family: var(--iore-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}
.iore-disc-compact__name--secondary { font-size: 1.25rem; }
.iore-disc-compact__desc {
	color: var(--iore-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin-top: 0.25rem;
}

.iore-disc-compact__scores {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.iore-disc-score__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
}
.iore-disc-score__letter {
	width: 24px; height: 24px;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.8rem;
	flex-shrink: 0;
}
.iore-disc-score__name {
	flex: 1;
	color: var(--iore-text);
	font-weight: 500;
	font-size: 0.92rem;
}
.iore-disc-score__value {
	font-weight: 700;
	color: var(--iore-violet-deep);
	font-size: 0.95rem;
}

/* Skills summary */
.iore-skills-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 720px) {
	.iore-skills-summary { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.iore-skill-summary {
	padding: 1rem;
	background: var(--iore-violet-tint);
	border-radius: var(--iore-radius-md);
	border: 1px solid var(--iore-violet-pale);
}
.iore-skill-summary__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
}
.iore-skill-summary__name {
	font-weight: 600;
	color: var(--iore-text);
	font-size: 0.92rem;
}
.iore-skill-summary__level {
	font-size: 0.82rem;
	font-weight: 700;
}
.iore-skill-summary__foot {
	color: var(--iore-text-muted);
	font-size: 0.82rem;
	margin-top: 0.4rem;
}

/* Teaser (placeholder Bientôt intégré aux vues actives) */
.iore-teaser {
	position: relative;
	background: linear-gradient(135deg, var(--iore-violet-tint) 0%, #fff 80%);
	border-style: dashed;
	border-color: var(--iore-border-strong);
}
.iore-teaser__badge {
	position: absolute;
	top: 1rem; right: 1rem;
	background: var(--iore-violet-deep);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.iore-teaser__desc {
	color: var(--iore-text-muted);
	line-height: 1.6;
	margin: 0.5rem 0 1.25rem;
}
.iore-teaser__skeleton {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.iore-teaser__skeleton-row {
	height: 12px;
	background: linear-gradient(90deg, var(--iore-border) 0%, var(--iore-violet-pale) 50%, var(--iore-border) 100%);
	background-size: 200% 100%;
	animation: iore-shimmer 2s infinite;
	border-radius: 4px;
}
.iore-teaser__skeleton-row--short { width: 60%; }
@keyframes iore-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ============================================================
 * 8. VUE "MES COMPÉTENCES"
 * ============================================================ */
.iore-disc-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
}
@media (min-width: 600px) { .iore-disc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .iore-disc-cards { grid-template-columns: repeat(4, 1fr); } }
.iore-disc-card {
	background: var(--iore-card);
	border: 1px solid var(--iore-border);
	border-top: 4px solid;
	border-radius: var(--iore-radius-md);
	padding: 1.25rem 1rem;
	text-align: center;
}
.iore-disc-card__letter {
	font-family: var(--iore-font-heading);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.3rem;
}
.iore-disc-card__name {
	font-weight: 700;
	color: var(--iore-violet-deep);
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
}
.iore-disc-card__desc {
	color: var(--iore-text-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

/* Domain focus */
.iore-domain-focus__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
}
@media (min-width: 700px) {
	.iore-domain-focus__grid { grid-template-columns: minmax(180px, 1fr) 2fr; }
}
.iore-domain-focus__level {
	color: #fff;
	border-radius: var(--iore-radius-md);
	padding: 1.5rem 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 140px;
}
.iore-domain-focus__level-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	opacity: 0.9;
	font-weight: 600;
	margin-bottom: 0.3rem;
}
.iore-domain-focus__level-value {
	font-family: var(--iore-font-heading);
	font-size: 1.75rem;
	font-weight: 700;
}
.iore-domain-focus__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.iore-domain-focus__stat {
	background: var(--iore-violet-tint);
	border-radius: var(--iore-radius-md);
	padding: 1.25rem 1rem;
	text-align: center;
}
.iore-domain-focus__stat-value {
	font-family: var(--iore-font-heading);
	font-size: 2rem;
	font-weight: 700;
	color: var(--iore-violet-deep);
	line-height: 1;
}
.iore-domain-focus__stat-value span {
	font-size: 1.1rem;
	color: var(--iore-text-muted);
	font-weight: 500;
}
.iore-domain-focus__stat-label {
	color: var(--iore-text-muted);
	font-size: 0.85rem;
	margin-top: 0.4rem;
}

/* Others grid */
.iore-others-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
}
@media (min-width: 700px) {
	.iore-others-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
.iore-others-grid__item {
	background: var(--iore-violet-tint);
	border-radius: var(--iore-radius-md);
	padding: 1rem;
}
.iore-others-grid__name {
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--iore-text);
	margin-bottom: 0.15rem;
}
.iore-others-grid__level {
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 0.6rem;
}
.iore-others-grid__score {
	color: var(--iore-text-muted);
	font-size: 0.82rem;
	margin-top: 0.4rem;
	text-align: right;
}

/* ============================================================
 * 9. VUES PLACEHOLDER
 * ============================================================ */
.iore-placeholder {
	text-align: center;
	padding: 3rem 2rem;
	position: relative;
}
.iore-placeholder__icon {
	font-size: 3.5rem;
	line-height: 1;
	margin-bottom: 1rem;
}
.iore-placeholder__badge {
	display: inline-block;
	background: var(--iore-violet-deep);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 0.75rem;
}
.iore-placeholder__title {
	font-size: 1.75rem;
	margin: 0 0 0.75rem;
}
.iore-placeholder__desc {
	color: var(--iore-text-muted);
	max-width: 560px;
	margin: 0 auto 2rem;
	line-height: 1.6;
	font-size: 1rem;
}
.iore-placeholder__features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 720px;
	margin: 0 auto 2rem;
	text-align: left;
}
@media (min-width: 720px) {
	.iore-placeholder__features { grid-template-columns: repeat(2, 1fr); }
}
.iore-placeholder__feature {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	background: var(--iore-violet-tint);
	padding: 1rem;
	border-radius: var(--iore-radius-md);
	border: 1px solid var(--iore-violet-pale);
}
.iore-placeholder__feature-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.iore-placeholder__feature-title {
	font-weight: 700;
	color: var(--iore-violet-deep);
	font-size: 0.95rem;
	margin-bottom: 0.15rem;
}
.iore-placeholder__feature-desc {
	color: var(--iore-text-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

/* ============================================================
 * 10. RESPONSIVE FINE TUNING
 * ============================================================ */
@media (max-width: 719px) {
	.iore-welcome-banner {
		padding: 1.5rem;
		border-radius: var(--iore-radius-md);
	}
	.iore-welcome-banner__title { font-size: 1.5rem; }
	.iore-card { padding: 1.25rem; }
	.iore-card__title { font-size: 1.2rem; }
	.iore-topbar { padding: 1rem 1.25rem 1rem 4rem; }
	.iore-topbar__title { font-size: 1.2rem; }
	.iore-topbar__subtitle { display: none; }
}