@charset "UTF-8";

/**
 * collapsible.css 2.3.0
 * Author: hybrid.
 *
 * Height animation via max-height (set by collapsible.js).
 * Requires collapsible.js — max-height values are set programmatically.
 *
 * States
 * off : .collapsible, .collapsible > *
 * on  : .collapsible.opened, .collapsible.opened > *
 *
 * Variants
 * .truncated  — starts at capped height, closing gradient via ::after
 *
 * Tokens
 * --collapsible-icon           icon mask-image for toggle (default: chevron-right)
 * --collapsible-icon-rotate    rotation on .active (default: 90deg)
 * --truncated-gradient-height  fade height (default: 2em)
 * --truncated-gradient-color   fade color as RGB tuple (default: --bright-rgb)
 *
 * Dependencies
 * collapsible.js               — sets max-height inline
 * --bright-rgb                 defined in colors.css
 * --duration-fast              defined in animations.css
 * --duration-normal            defined in animations.css
 * --easeInQuint                defined in animations.css
 * --easeOutQuint               defined in animations.css
 *
 * TODO
 * — color-mix() pour --truncated-gradient-color (cas hors système RGB)
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */

/**
 * Override in project CSS to customize per context.
 * --truncated-gradient-height and --truncated-gradient-color
 * control the fade-out effect on .truncated collapsibles.
 * --truncated-gradient-color expects an RGB tuple: e.g. 255, 255, 255
 */

:root {
	--collapsible-icon: var(--icon-more);
	--collapsible-icon-rotate: 45deg;
	--collapsible-icon-size: 1em;
	
	--truncated-gradient-height: 2em;
	--truncated-gradient-color:  var(--bright-rgb);
}

@media (min-width: 760px) {
	:root {
		--collapsible-icon-size: 2em;
	}
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* ============================== COLLAPSIBLE ============================== */

.collapsible {
	transition:
		max-height var(--duration-normal),
		margin var(--duration-fast),
		padding var(--duration-fast);
	transition-delay: calc(var(--duration-fast) / 2);
}
.collapsible > * {
	transition:
		opacity var(--duration-normal),
		margin var(--duration-fast);
}
.collapsible,
.collapsible > * {
	transition-timing-function: var(--easeOutQuint);
}

.collapsible.opened {
	transition-delay: 0s;
}
.collapsible.opened,
.collapsible.opened > * {
	transition-timing-function: var(--easeInQuint);
}
.collapsible.opened > * {
	transition-delay: calc(var(--duration-fast) / 2);
}


/* ============================== TOGGLE ============================== */

.collapsible-toggle::before {
	transition: transform var(--duration-fast);
	transition-timing-function: var(--easeOutQuint);
}
.collapsible-toggle.active::before {
	transition-timing-function: var(--easeInQuint);
}


/* =============== TRUNCATED =============== */

.collapsible.truncated::after {
	transition: opacity var(--duration-normal);
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== COLLAPSIBLE ============================== */

/* =============== DEFAULT =============== */

.collapsible {
	position: relative;
	display: block;
	max-height: 0;
	overflow: hidden;
}
.collapsible > * {
	opacity: 0;
}
.collapsible:not(.opened):not(.truncated) {
	/*margin-top: 0;*/
}


/* =============== OPENED =============== */

.collapsible.opened {
	padding: 0;
}
.collapsible.opened > * {
	opacity: 1;
}


/* ============================== TRUNCATED ============================== */

.collapsible.truncated {
	overflow: hidden;
}
.collapsible.truncated > * {
	opacity: 1;
	margin: 0;
}

.collapsible.truncated::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: var(--truncated-gradient-height);
	background: linear-gradient(
		to bottom,
		rgba(var(--truncated-gradient-color), 0) 0%,
		rgba(var(--truncated-gradient-color), .8) 50%,
		rgba(var(--truncated-gradient-color), 1) 100%
	);
	pointer-events: none;
}
.collapsible.truncated.opened::after {
	opacity: 0;
}

.collapsible.truncated:not(.opened) .read-more-hidden {
	display: none;
}
.collapsible.truncated.opened .read-more-hidden {
	display: block;
}


/* =============== MARKERS =============== */

.more-tag,
.more-marker {
	display: none !important;
}


/* ============================== TOGGLE ============================== */

/* =============== DEFAULT =============== */

.collapsible-toggle {
	display: inline-flex;
	align-items: center;
	gap: 1em;
	cursor: pointer;
	text-decoration: none;
	width: auto;
}
.collapsible-toggle * {
	text-decoration: none;
}


/* =============== ICON =============== */

.collapsible-toggle::after {
	content: "";
	position: relative;
	order: 2;
	height: var(--collapsible-icon-size);
	aspect-ratio: 1/1;
	background: currentColor;
	mask-image: var(--collapsible-icon);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	backface-visibility: hidden;
	transform: rotate(0deg);
}
.collapsible-toggle.active::after {
	transform: rotate(var(--collapsible-icon-rotate));
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific media overrides */

/* ============================== TOGGLE ============================== */

a.collapsible-toggle::before,
div.collapsible::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	display: block;
	color: inherit;
	height: calc(var(--stroke-width) * 1.5);
	background: var(--line-break);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

a.collapsible-toggle::before { top: 0; }
div.collapsible::after { bottom: 0; }
.collapsible { padding-bottom: calc(var(--stroke-width) * 1.5); }

a.collapsible-toggle {
	gap: 1em;
	width: 100%;
	justify-content: space-between;
	padding: .75em 0;
}

div.collapsible > *:last-child,
div.collapsible > *:first-child:last-child {
	padding-bottom: var(--content-spacing);
}

div.collapsible:not(.opened),
div.collapsible + .collapsible-toggle,
.collapsible-toggle + div.collapsible {
	margin-top: 0;
}

div.collapsible + .collapsible-toggle {
	margin-top: calc(var(--stroke-width) * -1.5);
}


/* ============================== TRUNCATED ============================== */

.book-labels + .collapsible-toggle {
	font-size: var(--button-small-font-size);
}
.book-labels + .collapsible-toggle::before {
	font-size: .5em;
}