/* ==========================================================================
   Custom Board — custom-board.css  v1.0.0
   ========================================================================== */

/* ── Layout ─────────────────────────────────────────────────────────────── */
.board-wrap {
	display:     flex;
	gap:         4rem;
	align-items: flex-start;
	width:       100%;
}

/* ── List ───────────────────────────────────────────────────────────────── */
.board-list {
	flex:      1 1 0;
	min-width: 0;
	/* border-bottom: 1px solid currentColor; */
}

.board-item {
	/* border-top: 1px solid currentColor; */
	cursor:     pointer;
	transition: opacity .25s ease;
}

/* Dim inactive items when one is active */
.board-list.has-active .board-item:not(.is-active) {
	opacity: .15;
}

.board-list.has-active .board-item.is-active .board-item-nom{
	font-weight: 200;
	font-size: clamp(2.5rem, 6vw, 5.3125rem);
}

.board-item-trigger {
	padding: .5rem 0;
}

.board-item-nom {
	font-size: clamp(2rem, 5vw, 4.0625rem);
	font-weight:    100;
	line-height:    1;
	text-transform: uppercase;
	letter-spacing: -.02em;
	transition:     opacity .2s;
}

.board-item-sub {
	font-size:   clamp(.85rem, 1.5vw, 1.1rem);
	font-weight: 300;
	line-height: 1.4;
	margin-top:  .15em;
	opacity:     .6;
}

.board-item-academie-inline {
	/* opacity: .7; */
}

/* ── Item detail (revealed on click) ────────────────────────────────────── */
.board-item-detail {
	display:        flex;
	flex-direction: column;
	gap:            .2rem;
	overflow:       hidden;
	max-height:     0;
	opacity:        0;
	transition:     max-height .35s ease, opacity .25s ease, padding .35s ease;
	padding-bottom: 0;
}

.board-item.is-active .board-item-detail {
	max-height:     200px;
	opacity:        1;
	padding-bottom: 1.25rem;
	text-transform: uppercase;
}

.board-item-detail-fonction {
	display:        block;
	font-size:      .7rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity:        .55;
}

.board-item-detail-titre {
	/* display:     block; */
	/* font-size:   .85rem; */
	font-weight: 400;
	line-height: 1.4;
	/* opacity:     .75; */
}

/* ── Preview panel ──────────────────────────────────────────────────────── */
.board-preview {
	width:      260px;
	flex-shrink: 0;
	position:   sticky;
	top:        4rem;
	align-self: flex-start;
	opacity:    0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.board-preview.is-visible {
	opacity:        1;
	pointer-events: auto;
}

.board-preview-inner {
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.board-preview-img-wrap {
	width:        100%;
	aspect-ratio: 2 / 3;
	overflow:     hidden;
}

.board-preview-img-wrap img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: top center;
	display:         block;
}

.board-preview-caption {
	margin-top:     .75rem;
	font-size:      1rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: .1em;
	/* opacity:        .6; */
	line-height:    1.5;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.board-wrap {
		flex-direction: column;
		gap:            2rem;
	}

	.board-preview {
		position: static;
		width:    60%;
		max-width: 280px;
		opacity:  0;
		transition: opacity .3s ease;
	}

	.board-preview.is-visible {
		opacity: 1;
	}

	.board-preview-inner {
		transform: none !important;
	}
}