/* =============================================================================
   Single Contact Person — Styles
   Réutilise les variables CSS définies dans single-trader.css
============================================================================= */

:root {
	--tr-color-primary:    #1e3a5f;
	--tr-color-accent:     #c41230;
	--tr-color-text:       #1a1a2a;
	--tr-color-text-muted: #6b7280;
	--tr-color-bg:         #ffffff;
	--tr-color-bg-alt:     #f5f7fa;
	--tr-color-border:     #e2e8f0;
	--tr-radius:           6px;
	--tr-container:        800px;
}

.contact-person-single {
	color: var(--tr-color-text);
	font-family: inherit;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.cp-hero {
	background-color: var(--tr-color-primary);
	color: #fff;
	padding: 3rem 1.5rem;
}

.cp-hero__inner {
	max-width: var(--tr-container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 2rem;
}

@media (max-width: 600px) {
	.cp-hero__inner { flex-direction: column; text-align: center; }
}

.cp-hero__photo {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255,255,255,.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-hero__avatar { color: rgba(255,255,255,.4); }

.cp-hero__name {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	margin: 0 0 .4rem;
}

.cp-hero__job {
	opacity: .8;
	margin: 0;
	font-size: 1rem;
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.cp-body {
	padding: 3rem 1.5rem;
	background: var(--tr-color-bg);
}

.cp-body__inner {
	max-width: var(--tr-container);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.cp-section {
	padding: 1.5rem;
	background: var(--tr-color-bg-alt);
	border: 1px solid var(--tr-color-border);
	border-radius: var(--tr-radius);
}

.cp-section__heading {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tr-color-primary);
	margin: 0 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--tr-color-primary);
}

/* ── Lignes contact ─────────────────────────────────────────────────────────── */
.cp-line {
	display: flex;
	gap: .75rem;
	align-items: baseline;
	margin-bottom: .6rem;
}

.cp-line:last-child { margin-bottom: 0; }

.cp-line__label {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tr-color-text-muted);
	min-width: 3.5rem;
}

.cp-line a {
	color: var(--tr-color-text);
	text-decoration: none;
}

.cp-line a:hover { color: var(--tr-color-accent); }

/* ── Tags (langues / matériaux) ─────────────────────────────────────────────── */
.cp-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.cp-tags li {
	font-size: .8rem;
	background: var(--tr-color-primary);
	color: #fff;
	padding: .25rem .65rem;
	border-radius: 999px;
}

/* ── Traders associés ───────────────────────────────────────────────────────── */
.cp-traders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.cp-traders a {
	color: var(--tr-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.cp-traders a:hover { color: var(--tr-color-accent); }