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

.apropos-intro {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 70px;
}

.apropos-photo {
	flex: 0 0 160px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: 0 20px 40px -18px rgba(0,0,0,0.6);
}
.apropos-photo img { width: 100%; height: 100%; object-fit: cover; }

.apropos-intro h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 8px 0 4px; }
.apropos-poste { font-family: var(--font-mono); color: var(--accent); font-size: 0.92rem; margin-bottom: 14px; }
.apropos-resume { color: var(--text-muted); max-width: 62ch; }

.timeline-section h2 { font-size: 1.4rem; margin-bottom: 18px; }

.timeline-hint {
	font-size: 0.82rem;
	color: var(--text-faint);
	margin: -8px 0 18px;
}

/* ---------- Barre d'outils : zoom + mode de filtrage (points 5.1 et 5.4) ---------- */
.timeline-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.timeline-zoom {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 6px;
}
.timeline-zoom button {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--bg-alt);
	color: var(--text);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.timeline-zoom button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.timeline-zoom button:disabled { opacity: 0.35; cursor: default; }
.timeline-zoom-level {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--text-faint);
	min-width: 3.2em;
	text-align: center;
}
.timeline-mode-btn {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: 0.76rem;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.timeline-mode-btn:hover { border-color: var(--accent); color: var(--text); }
.timeline-mode-btn span { color: var(--text); font-weight: 500; }

/* ---------- Axe / canevas scrollable ---------- */
.timeline-scroll {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	background: var(--surface);
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--line) transparent;
}
.timeline-scroll.dragging { cursor: grabbing; user-select: none; }

.timeline-canvas {
	position: relative;
}

.timeline-axis {
	position: relative;
	height: 36px;
	border-bottom: 1px solid var(--line);
}
.tick-year, .tick-month {
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px solid var(--line);
}
.tick-month { border-left-style: dotted; opacity: 0.5; }
.tick-year-label {
	position: absolute;
	top: 8px;
	left: 6px;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--text-faint);
	white-space: nowrap;
}

.timeline-today {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 2px dashed var(--accent);
	z-index: 5;
	pointer-events: none;
}
.timeline-today::after {
	content: 'Aujourd’hui';
	position: absolute;
	top: 4px;
	left: 6px;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	color: var(--accent);
	background: var(--surface);
	padding: 1px 6px;
	border-radius: 999px;
	white-space: nowrap;
}

.timeline-lanes { position: relative; }

.timeline-block {
	position: absolute;
	box-sizing: border-box;
	height: 34px;
	border-radius: 7px;
	background: var(--dot-soft, var(--accent-soft));
	border: 1px solid var(--dot, var(--accent));
	color: var(--text);
	font-size: 0.78rem;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease, height 0.15s ease;
	z-index: 2;
}
.timeline-block:hover, .timeline-block:focus-visible {
	filter: brightness(1.18);
	transform: translateY(-2px);
	z-index: 6;
}
/* Mode "estompé" (soft, par défaut) : la boîte reste visible mais grisée. */
.timeline-block.dimmed { opacity: 0.25; }
/* Mode "masqué" (hard) : la boîte disparaît complètement (5.4). */
.timeline-block.hidden-out { display: none; }

/* Le libellé peut déborder de sa boîte (à droite, puis à gauche si besoin),
   mais reste toujours dans les bornes calculées par apropos.js (jamais sur
   une boîte voisine, jamais hors du canevas). Sa position "left" est recalée
   en JS pour flotter vers le centre de la zone visible de l'écran. */
.timeline-block-label {
	position: absolute;
	top: 0;
	height: 34px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	white-space: nowrap;
	pointer-events: none;
	background: var(--surface);
	border-radius: 5px;
}

.timeline-block-ext {
	position: absolute;
	box-sizing: border-box;
	height: 34px;
	border: 1px dashed var(--dot, var(--accent));
	border-radius: 7px;
	pointer-events: none;
	opacity: 0.7;
	z-index: 1;
}
.timeline-block-ext.dimmed { opacity: 0.12; }

/* ---------- Infobulle détaillée ---------- */
.timeline-popover {
	position: fixed;
	z-index: 60;
	max-width: 300px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-m);
	padding: 14px 16px;
	box-shadow: 0 20px 50px -16px rgba(0,0,0,0.7);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.12s ease, transform 0.12s ease;
}
.timeline-popover.visible { opacity: 1; transform: translateY(0); }
.timeline-popover .pop-cat {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	color: var(--dot, var(--accent));
	margin-bottom: 4px;
}
.timeline-popover h4 { font-size: 0.98rem; margin: 0 0 4px; }
.timeline-popover .pop-dates {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--text-faint);
	margin-bottom: 6px;
}
.timeline-popover .pop-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 6px; }
.timeline-popover .pop-descr { font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 640px) {
	.apropos-intro { flex-direction: column; text-align: center; }
}