.competences-page { padding-top: 44px; padding-bottom: 100px; }

.competences-intro { max-width: 62ch; margin-bottom: 44px; }
.competences-intro h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 14px 0 8px; }
.competences-sub { color: var(--text-muted); }

.competences-section { margin-bottom: 40px; }
.competences-section h2 { font-size: 1.15rem; margin-bottom: 16px; }

.competences-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px 40px;
}

/* ---------- Barres de technologies ---------- */
.tech-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tech-bar { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 14px; }
.tech-bar-name { font-family: var(--font-mono); font-size: 0.86rem; }
.tech-bar-track {
	height: 8px;
	border-radius: 999px;
	background: var(--surface-2);
	overflow: hidden;
}
.tech-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.tech-bar-count { font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; }

@media (max-width: 560px) {
	.tech-bar { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Listes simples (profil, langues, certifications, intérêts) ---------- */
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tag-list li {
	font-size: 0.92rem;
	color: var(--text-muted);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}