/**
 * Panneaux secteurs — rangee verticale des 900px, accordeon en dessous.
 * Visuels : mediatheque. Aucune image dans le theme.
 */

.sectors {
	--sectors-ink: var(--color-paper);
	--sectors-veil: color-mix(in srgb, var(--color-base) 72%, transparent);
	--sectors-rule: color-mix(in srgb, var(--color-paper) 14%, transparent);
	margin-inline: calc(-1 * var(--space-page));
}

.sectors__list {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	block-size: 32rem;
}

.sectors + .wp-block-buttons {
	margin-block-start: var(--space-2xl);
}

@media (max-width: 1023px) {
	.sectors + .wp-block-buttons {
		justify-content: center;
	}
}

.sectors__item {
	position: relative;
	flex: 1 1 0;
	min-inline-size: 0;
	overflow: hidden;
	border-inline-end: var(--line-width) solid var(--sectors-rule);
	transition: flex-grow var(--duration-base) var(--ease);
}

.sectors__item:last-child {
	border-inline-end: 0;
}

.sectors__item.is-open {
	flex-grow: 3.4;
}

.sectors__trigger {
	appearance: none;
	display: block;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--color-surface-alt);
	color: var(--sectors-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	cursor: pointer;
	text-align: start;
	inline-size: 100%;
	block-size: 100%;
	overflow: hidden;
}

.sectors__trigger:hover,
.sectors__trigger:focus,
.sectors__trigger:active {
	background: var(--color-surface-alt);
	color: var(--sectors-ink);
	border: 0;
}

.sectors__trigger:focus-visible {
	outline: var(--focus-width) solid var(--color-accent);
	outline-offset: calc(-1 * (var(--focus-width) + var(--focus-offset)));
}

.sectors__media {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(1);
	transition: filter var(--duration-base) var(--ease);
}

.sectors__media--placeholder {
	background-color: var(--color-surface-alt);
}

.sectors__item.is-open .sectors__media {
	filter: grayscale(0);
}

.sectors__veil {
	position: absolute;
	inset: 0;
	background: var(--sectors-veil);
	pointer-events: none;
}

.sectors__item.is-open .sectors__veil {
	background: linear-gradient(
		to bottom,
		transparent 0%,
		transparent 32%,
		color-mix(in srgb, var(--color-base) 42%, transparent) 58%,
		color-mix(in srgb, var(--color-base) 88%, transparent) 100%
	);
}

.sectors__copy {
	position: absolute;
	z-index: 1;
	inset-block-end: var(--space-lg);
	inset-inline-end: var(--space-md);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-sm);
	max-inline-size: 36ch;
}

.sectors__label {
	margin: 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-label);
	color: var(--sectors-ink);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	line-height: 1.15;
}

.sectors__item.is-open .sectors__copy {
	inset-inline: var(--space-lg);
	align-items: flex-start;
}

.sectors__item.is-open .sectors__label {
	writing-mode: horizontal-tb;
	font-size: var(--font-size-xl);
	letter-spacing: var(--letter-spacing-display);
}

.sectors__item:not(.is-open) .sectors__desc {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

.sectors__item.is-open .sectors__desc {
	position: relative;
	margin: 0;
	padding: 0;
	clip: auto;
	white-space: normal;
	overflow: visible;
	opacity: 1;
	color: var(--sectors-ink);
}

.sectors__desc p {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
}

@media (max-width: 899px) {
	.sectors {
		margin-inline: 0;
	}

	.sectors__list {
		flex-direction: column;
		block-size: auto;
	}

	.sectors__item {
		flex: none;
		border-inline-end: 0;
		border-block-end: var(--line-width) solid var(--color-line);
		overflow: visible;
	}

	.sectors__item:last-child {
		border-block-end: 0;
	}

	.sectors__item.is-open {
		flex-grow: 0;
	}

	.sectors__trigger {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		block-size: auto;
	}

	.sectors__copy,
	.sectors__item.is-open .sectors__copy {
		inset-inline: var(--space-lg);
		inset-block-end: var(--space-md);
		align-items: flex-start;
	}

	.sectors__label,
	.sectors__item.is-open .sectors__label {
		writing-mode: horizontal-tb;
	}

	.sectors__item.is-open .sectors__desc {
		color: var(--sectors-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sectors__item,
	.sectors__media {
		transition: none;
	}
}