.chivo-mono-<uniquifier> {
	font-family: "Chivo Mono", monospace;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

.lato-thin {
	font-family: "Lato", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.lato-light {
	font-family: "Lato", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.lato-regular {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.lato-bold {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.lato-black {
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.lato-thin-italic {
	font-family: "Lato", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.lato-light-italic {
	font-family: "Lato", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.lato-regular-italic {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.lato-bold-italic {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.lato-black-italic {
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-style: italic;
}




* {
	margin: 0;
	padding: 0;
}

:root {
	--padding: 1.5rem;
	--color-black: #000;
	--color-white: #fff;
	--color-grey: #777;
	--color-grey-b: #C7CED3ff;
	--color-grey-b-light: #D7DEE3ff;
	--color-grey-b-drk: #8c9ba5ff;
	--color-light: #efefef;
	--color-text: var(--color-black);
	--color-text-grey: var(--color-grey-b-drk);
	--color-background: var(--color-white);
	--color-code-light-grey:	#cacbd1;
	--color-code-comment:			#a9aaad;
	--color-code-white:				#c5c9c6;
	--color-code-red:					#d16464;
	--color-code-orange:			#de935f;
	--color-code-yellow:			#f0c674;
	--color-code-green:				#a7bd68;
	--color-code-aqua:				#8abeb7;
	--color-code-blue:				#7e9abf;
	--color-code-purple:			#b294bb;
	--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-family-mono: "Chivo Mono", monospace;
	--color-violet:						#7E00C6;
	--color-bg-concert:				#202;
	--color-link:							#006fff;

	/* --font-family-sans: "Lato", sans-serif; */
	/* --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; */
}

html {
	font-family: var(--font-family-sans);
	color: var(--color-text);
	background: var(--color-background);
	scroll-behavior: smooth;

}
img {
	width: 100%;
}
body, .page {
	padding: var(--padding);
	max-width: 70rem;
	margin: 0 auto;
}
li {
	list-style: none;
}
a {
	color: currentColor;
	text-decoration: none;
}
button {
	font: inherit;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
}
strong, b {
	font-weight: 600;
}
small {
	font-size: inherit;
	color: var(--color-text-grey);
}

/* non used !!! */
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-light); }
.bg-eee { background-color: #eee;}
.bg-smoke { background-color: whitesmoke;}


.color-grey {
	color: var(--color-text-grey);
}

.header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-right: -1rem;
	margin-left: -1rem;
	margin-bottom: 6rem;
	/* border: 1px solid red; */
}

.logo {
	/* outline: 1px solid red; */
	position: relative;
	padding: 1rem;
	display: flex;
	align-items: center;
  font-size: 1.25rem;
	font-weight: 600;
	/* text-transform: uppercase; */
	cursor: pointer;
	&:before {
		content: ''; position: absolute; bottom: 10px; right: 16px; width: 0px; height: 2px;
		background-color: #000; transition: width 200ms ease;
	}
	&:hover:before { width: 100%; }

}




/*///////////////////////////////////
	M  E  N  U
///////////////////////////////////*/

.menu {
	display: none;
	flex-direction: row; justify-content: space-between; align-items: start;
	/* font-size: 13px; letter-spacing: 0.025em; */

	& div.menu-section {
		position: relative;

		& > a {
			padding: 1rem;

			&:after {
				content: ''; position: absolute; bottom: 10px; left: 16px; width: 0px; height: 2px;
				background-color: #000; transition: width 200ms ease;
			}
			&:hover:after { width: calc( 100% - 32px); }
			&[aria-current] {
				/* pointer-events: none; */
				/* text-decoration: underline; text-underline-offset: 6px; */
			}
			&[aria-current]:after { width: calc( 100% - 32px); }
		}

		& a {
			position: relative; display: block;


		}

		& ul.submenu {
			position: absolute; left: -24px; background-color: white; padding-top: 0px; height: 0px; opacity: 0; box-shadow: 0 16px 16px #0003; overflow: hidden; transition: height 300ms ease, padding-top 300ms ease, opacity 300ms ease; transition-delay: 400ms; z-index: 10;

			& li {
				border: 0px solid red; opacity: 0.6;
				&:hover  { opacity: 1; }

				& a {
					/* padding: 0.5rem 1rem; */
					display: block;  font-size: 0.9rem; padding: 2px 1rem 12px 1rem;

					& span {
						position: relative; padding: 0 24px 0 24px;
						&:after { content: ""; position: absolute; left: 24px; bottom: -4px; width: 0; height: 2px; text-underline-offset: 8px; background-color: black; transition: width 100ms ease; }
					}

					&:hover span:after { width: calc(100% - 48px); }
				}
			}
		}


		&:hover {
			& > ul.submenu  { opacity: 1; transition-delay: 200ms;  }
		}


		&:nth-child(1) > ul.submenu { min-width: 180px; }
		&:nth-child(2) > ul.submenu { min-width: 180px; }
		&:nth-child(3) > ul.submenu { min-width: 180px; }
		&:nth-child(4) > ul.submenu { min-width: 180px; }
		&:nth-child(5) > ul.submenu { min-width: 180px; }

		&:nth-child(1):hover > ul.submenu { padding-top: 12px; height: 42px; }
		&:nth-child(2):hover > ul.submenu { padding-top: 12px; height: 74px; }
		&:nth-child(3):hover > ul.submenu { padding-top: 12px; height: 138px; }
		&:nth-child(4):hover > ul.submenu { padding-top: 12px; height: 170px; }
		&:nth-child(5):hover > ul.submenu { padding-top: 12px; height: 74px; }



	}

	& div.navlanguages {
		position: relative;
		display: flex;
		margin: 4px 16px 0 40px;

		& a {
			color: var(--color-grey-b);
			display: flex; flex-direction: column; justify-content: center; align-items: center;
			width: 44px; height: 44px;
			text-transform: uppercase; font-size: 0.7rem; padding: 0; font-weight: 700;
			outline: 1px solid var(--color-grey-b); outline-offset: 0px; border-radius: 50%;
			transition: all 100ms ease;

			&:after {
				content: ''; position: absolute; top: 0px; left: 0px; width: 44px; height: 44px; border-radius: 50%; z-index: -1;
				background-color: #fff;
				transition: all 100ms ease;
			}
			&:hover {
				color: #000; outline: 2px solid #000; outline-offset: 2px;
				/* &:after { background-color: #eee; } */
			}
			&.active { display: none;}
		}
	}
}



/*/////////////////////////////////*/














div.btn-menu {
	position: fixed; right: 24px; top: 28px; cursor: pointer;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 44px; height: 44px; outline: 1px solid #0003; border-radius: 50%; background-color: #fff;
	transition: all 100ms ease;

	& svg { display: block; width: 24px; opacity: 1; transition: opacity 100ms ease;}

	&:hover {
		 outline: 2px solid #000; outline-offset: 2px;
		 /* & svg { opacity: 1; } */
	}
}
div#menuMobil {
	padding: var(--padding);
	max-width: 70rem;
	margin: 0 auto;
	overflow: hidden;
	opacity: 1;
	background-color: #fff;
	position: fixed; left: 0; top: 0px; right: 0; bottom: 0; z-index: 100;
	transition: all 300ms ease;
	/* border: 1px solid red; */

	&.hidden {
		bottom: 100vh; opacity: 0; pointer-events: none;
	}

	& header.header {
		flex-wrap: no-wrap;
		justify-content: start;
		flex-direction: column;
		/* border: 2px solid red; */

		& nav.menu-mobil {
			margin: 2rem 1rem 0 1rem;
			display: flex; flex-direction: column;

			& a {
				border: 0px solid #ddd; padding: 0.5rem 0;
				display: block;

				& span {
					position: relative;
					/* outline: 1px solid grey; */
					padding: 0.25rem 0;

					&:after {
						content: ''; position: absolute; bottom: 0px; left: 0px; width: 0px; height: 2px;
						background-color: #000; transition: width 200ms ease;
					}

				}


				&:hover {

					& span {
						&:after { width: 100%; }
					}

				}

				&[aria-current] {
					& span {
						&:after { width: 100%; }
					}
				}

				&.active { display: none;}

			}
		}
	}
}


.footer {
	padding: 9rem 0 6rem; line-height: 1.5em;

	/* &:before {
		content: ""; display: block; width: 1.5rem; height: 2px; background: var(--color-black); margin-bottom: 1.5rem;
	} */

	& h2 {
		font-weight: 600;
		margin-bottom: .75rem;
	}
	& ul,
	& p {
		color: var(--color-text-grey);
	}
	& p {
		padding-right: 16px;
		/* max-width: 60%; */
		/* max-width: 15rem; */
	}

	& h2,
	& ul li {
		& a {
			display: block;
			transition: color 200ms cubic-bezier( 0.1, 0.1, 1, 1 );

			& span { position: relative; border: 0px solid red; }
			& span:after {
				content: ""; position: absolute; left: 0; width: 0; transition: width 100ms cubic-bezier( 0.1, 0.1, 1, 1 );
			}


		}
		& a:hover {
			color: var(--color-black);
			& span:after { width: 100%; }
		}

		&:last-child a { border: 0px solid red; padding-bottom: 2rem;}
	}
	& h2 {
		& a {
			& span:after { bottom: -4px; height: 2px; background: var(--color-black)}
		}
	}

	& ul li {
		& a {
			& span:after { bottom: -3px; height: 2px; background: var(--color-black)}
		}
	}

	& div.grid-plan { display: grid; grid-template-columns: repeat(1, 1fr); gap:24px 12px; }
}









.social {
	display: flex;
	padding: 0 .5rem;
}
.social a {
	padding: 1rem .5rem;
}

.section {
	padding: 3rem 0;
}

.grid {
	--columns: 12;
	--gutter: 3rem;
	display: grid;
	grid-gap: var(--gutter);
	grid-template-columns: 1fr;
}
.grid > .column {
	margin-bottom: var(--gutter);
}

.autogrid {
	--gutter: 3rem;
	--min: 10rem;
	display: grid;
	grid-gap: var(--gutter);
	grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
	grid-auto-flow: dense;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}


time {
	font-family: var(--font-family-mono); color: var(--color-violet); font-weight: 400; font-size: 0.8rem; letter-spacing: 0em;
}


.text {
	line-height: 1.5em;
}
.text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.text :first-child {
	margin-top: 0;
}
.text :last-child {
	margin-bottom: 0;
}
.text p,
.text ul,
.text ol {
	margin-bottom: 1.5rem;
}
.text ul,
.text ol {
	margin-left: 1rem;
}
.text ul p,
.text ol p {
	margin-bottom: 0;
}
.text ul > li {
	list-style: disc;
}
.text ol > li {
	list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
	margin-bottom: 0;
}
.h0 {
	font-size: 4rem;
	font-weight: 900;
	margin: -16px 0 0 0;
	line-height: 1.25em;
}
.text h1,
.h1,
.intro {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	line-height: 1.25em;
}
.text h2,
.h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
}
.text h3,
.h3 {
	font-weight: 600;
}
.text h4,
.h4 {
	font-size: 1.0rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
}
.text .codeblock {
	display: grid;
}
.text code {
	font-family: var(--font-family-mono);
	font-size: 1em;
	background: var(--color-light);
	padding: 0 .5rem;
	display: inline-block;
	color: var(--color-black);
}
.text pre {
	margin: 3rem 0;
	background: var(--color-black);
	color: var(--color-white);
	padding: 1.5rem;
	overflow-x: scroll;
	overflow-y: hidden;
	line-height: 1.5rem;
}
.text pre code {
	padding: 0;
	background: none;
	color: inherit;
}
.text hr {
	margin: 6rem 0;
}
.text dt {
	font-weight: 600;
}
.text blockquote {
	font-size: 1.25rem;
	line-height: 1.325em;
	border-left: 2px solid var(--color-black);
	padding-left: 1rem;
	margin: 3rem 0;
	max-width: 25rem;
}
.text blockquote footer {
	font-size: .875rem;
	font-style: italic;
}
.text figure {
	margin: 3rem 0;
}
.text figcaption {
	font-size: 0.9rem;
	padding-top: .5rem;
	color: var(--color-text-grey);
}
.text figure ul {
	line-height: 0;
	display: grid;
	gap: 1.5rem;
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
	list-style: none;
}

hr {
	border: 0;
	background: currentColor;
	height: 2px;
	width: 1.5rem;
	margin: 3rem auto;
}







.align-center {
	text-align: center;
}

.intro {
	max-width: 40rem;
}
.intro *:not(:last-child) {
	margin-bottom: 1em;
}

.cta {
	background: var(--color-black);
	color: var(--color-white);
	display: inline-flex;
	justify-content: center;
	padding: .75rem 1.5rem;
	border: 4px solid var(--color-white);
	outline: 2px solid var(--color-black);
}

.box {
	background: var(--color-light);
	padding: 1.5rem;
	border: 4px solid var(--color-white);
	outline: 2px solid var(--color-light);
}

.video,
.img {
	position: relative;
	display: block;
	--w: 1;
	--h: 1;
	padding-bottom: calc(100% / var(--w) * var(--h));
	background: var(--color-black);
}
.img img,
.img svg,
.video iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.img[data-contain] img {
	object-fit: contain;
}
.img-caption,
.video-caption {
	padding-top: .75rem;
	line-height: 1.5em;
}





.map {
	--w: 2;
	--h: 1;
	padding-bottom: calc(100% / var(--w) * var(--h));
	position: relative;
	overflow: hidden;
	background: var(--color-black);
}
.map iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.margin-s {
	margin-bottom: .75rem;
}
.margin-m {
	margin-bottom: 1.5rem;
}
.margin-l {
	margin-bottom: 3rem;
}
.margin-xl {
	margin-bottom: 4.5rem;
}
.margin-xxl {
	margin-bottom: 6rem;
}







.pagination {
	display: flex;
	padding-top: 6rem;
	& > span {
		color: var(--color-text-grey);
	}
	& > * {
		padding: .5rem;
		width: 3rem;
		text-align: center;
		border: 2px solid currentColor;
		margin-right: 1.5rem;
	}
	& > a:hover {
		background: var(--color-black);
		color: var(--color-white);
		border-color: var(--color-black);
	}
}






/* ||| page note + page note-concert / ACTU ||| */
.note-excerpt {
	line-height: 1.5em;
	padding-bottom: 1.5rem;
	/* outline: 2px solid magenta; */


	& header { margin-bottom: 1.5rem; }
	& figure { margin-bottom: .5rem; }

	.note-excerpt-title { font-weight: 600; }
	.note-excerpt-date { color: var(--color-text-grey); }

}




div.workingbox-prev-next {
	position: relative;
	display: flex; flex-direction: row; justify-content: end; align-items: center; gap: 8px;
	/* border: 1px solid red; */

	&:before {
		position: absolute; content: ''; top: 0px; bottom: 0; right: 53px; width: 2px; background-color: black;
	}
	& span {
		/* outline: 1px solid red; */
		width: 44px;

		& a.btn-1 {
			position: relative; display: block; width: 44px; aspect-ratio: 1/1; color: black;
			outline: 0px solid #000; outline-offset: 0;
			border-radius: 0%;
			display: flex; flex-direction: column; justify-content: center; align-items: center;
			overflow: hidden;
			box-sizing: border-box; transition: color 150ms ease, outline 100ms ease, outline-offset 100ms ease;
			text-decoration: none; text-align: center; font-weight: 900; font-size: 0.9rem; letter-spacing: 0.05em;

			&.off { opacity: 0.1; pointer-events: none; background-color: #000; color: #fff; outline-offset: 3px; }
			&:before { position: absolute; top: 0px; bottom: 0; opacity: 0; transition: all 150ms ease; font-weight: normal; color: white}

			&:hover {
				color: white;
				/* outline: 2px solid black; outline-offset: 3px; */
				&:before { opacity: 1; font-weight: 400; }
			}
		}

		& a.btn-prev {
			&:before { /*content: '←';*/ content: ''; right: 0; width: 0px; background-color: black; z-index: -1; }
			&:hover:before { width: 100%; }
		}

		& a.btn-next {
			&:before { /*content: '→';*/ content: ''; left: 0; width: 0px; background-color: black; z-index: -1; }
			&:hover:before { width: 100%; }
		}

	}
}



div.full-hero {
	position: absolute; top: 146px; left: 0; right: 0; height: 25vh; min-height: 256px; overflow: hidden; z-index: -1;

	& div.layers {
		border: 0px solid red;
		position: absolute; top: 0; left: 0; right: 0; bottom: 0;
		/* filter: hue-rotate(-50deg); */

		& > div.layer {
			border: 0px solid lime;
			position: absolute; top: 0; left: 0; right: 0; bottom: 0;
		}
	}
}
div.page-intro { min-height: 256px;}

@media screen and (min-width: 60rem) {
	div.full-hero { height: 50vh; min-height: 544px; }
	div.page-intro { min-height: 544px;}
}



/* ||| page ecrit ||| */

a.btn-pdf {
	position: relative;
	color: #ccc;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	width: 44px; height: 44px; background-color: white;
	text-transform: uppercase; text-decoration: none; font-size: 0.7rem; padding: 0; font-weight: 700;
	outline: 1px solid #0002; outline-offset: 0px; border-radius: 22px;
	transition: all 100ms ease; transition-delay: 100ms;

	&:before { content: '↓'; position: absolute; left: 15px; top: 0px; opacity: 0; transition: all 200ms ease; font-size: 1.2rem; font-weight: 500;}
	&:after { content: ''; position: absolute; left: 22px; right: 22px; top: 30px; height: 2px; background-color: #000; transition: all 200ms ease; }

	&:hover {
		color: #0000; outline: 2px solid #000; outline-offset: 2px;
		&:before { top: 8px; opacity: 1; color: #000; }
		&:after { left: 16px; right: 16px; }
	}



	/* padding: 8px; background-color: white; color: black; border: 2px solid #000; text-decoration: none; width: 96px; text-align: center; font-weight: 900; font-size: 0.9rem; letter-spacing: 0.05em; box-sizing: border-box; transition: background-color 200ms ease, color 200ms ease, outline 100ms ease;



	&:hover {
		background-color: black; color: white; outline: 2px solid black;
		&:before { top: 8px; opacity: 1; }
	}
	 */

}



ul.pages-shortlist {
	width: 100%;
	/* border: 1px solid red; */

	& li {
		/* outline: 1px solid red; */
		/* &:nth-child(1) { display: block; }
		&:nth-child(2) { display: none; }
		&:nth-child(3) { display: none; }
		&:nth-child(4) { display: none; }
		&:nth-child(5) { display: none; } */

		& a {
			position: relative; color: #000;
			/* display: flex; flex-direction: row; justify-content: space-between; align-items: end; */
			display: flex; flex-direction: column; justify-content: space-between; align-items: start;
			padding: 0.75rem 0 0.75rem 0; border-bottom: 1px solid #0001;
			/* outline: 1px solid red; */

			&:after { content: ""; position: absolute; bottom: -1px; right: 0px; width: 100%; height: 1px; background-color: var(--color-grey-b-light); transition: all 150ms ease; transition-delay: 100ms; }


			& > span {
				font-size: 1.1rem; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;
				/* border: 1px solid red; */

				& b {
					position: relative;
					&:after {content: ""; position: absolute; left: 0; width: 0; bottom: -5px; height: 2px; background-color: #000; transition: width 150ms ease; transition-delay: 0ms;}
				}
			}

			& img { display: block; width: 128px; margin: 1rem 0}

			&:hover {
				&:after { height: 2px; transition-delay: 0ms;}
				& time { color: #000; }
				& > span b:after { width: calc(100% - 0px); }
			}

		}
		& small { display: block; width: 100%; padding-top: 0.5rem; font-size: 0.85rem; text-align: right;}
		& time { color: var(--color-grey-b-drk); font-size: 0.85rem; transition: color 150ms linear; }
	}

	& li.concert-cell time span {
				&:nth-child(1) { display: none; border: 0px solid blue;}
				&:nth-child(2) { display: block; border: 0px solid red;}
	}
}

@media screen and (min-width: 70rem) {
	ul.pages-shortlist li.concert-cell time span {
		&:nth-child(1) { display: block; border: 0px solid blue;}
		&:nth-child(2) { display: none; border: 0px solid red;}
	}
}

ul.pages-shortlist-publications {
	& li {
		/* margin-bottom: 0.5rem; */
		& a {
			display: flex; flex-direction: row; justify-content: start; align-items: stretch; gap: 0px; width: 200%;
			padding: 2rem; transition: width 500ms ease;
			/* outline: 1px solid red; */

			& > span {
				display: flex; flex-direction: column; justify-content: space-around; align-items: start;
				padding: 0rem 0 3rem 0;
				text-shadow: 0 0 0px #000;
				font-size: 1.5rem; font-weight: 600;
				/* outline: 1px solid red; */

				& span.titre {
					position: relative;
					&:after { content: ""; position: absolute; bottom: -5px; left: 0px; width: 0px; height: 2px; background-color: #000; transition: all 300ms ease; transition-delay: 300ms;}
				}
			}

			& img { display: block; width: 128px; margin:0 2rem 0 0; transition: transform 200ms ease; transition-delay: 300ms;}

			&:hover {
				width: 100%;

				& img { transform: scale(1.1, 1.1); transition-delay: 0ms;}

				& span.titre {
					&:after { width: 100%; transition-delay: 0ms;}
				}
			}
		}
	}
}


/* ||| page concerts + page oeuvre + page documentation ||| */

ul.btn-ancre {
	margin-bottom: 1.25rem;

	& li {
		margin-bottom: 0rem;

		& a {
			position: relative;

			& h2.h2 { margin: 0; padding-bottom: 0.5rem;}

			&:after { position: absolute; content: ''; right: calc( 100% + 12px ); bottom: 17px; width: 0; height: 2px; background-color: #000; transition: width 100ms ease;}
			&:hover:after { width: 24px; }
		}
	}
}
a.ancre { display: block; padding-top: 64px;}

.right-img { overflow: hidden; aspect-ratio: 16/9; background-color: none; border-radius: 0px; }

div.maison-ona {
	/* outline: 1px solid grey; */
	margin-top: 7rem;

	& a {
		display: flex; flex-direction: row; justify-content: start; align-items: start;
		color: #223155;

		& > img {display: block; width: 48px}
		& > span {
			border-left: 2px solid #223155; margin-left: 16px; padding-left: 16px;
			& > span:nth-child(1) {
				position: relative;
				display: inline-block; padding: 0.9rem 0 0.75rem 0; font-weight: 700;
				&:after { content: ""; position: absolute; bottom: 9px; left: 0; right: 100%; height: 2px; background-color: #223155; transition: all 100ms ease; }
			}
			& > span:nth-child(2) { color: #7281A5;}
		}

		&:hover {
			& > span {
				& > span:nth-child(1) {
					&:after { right: 0%;}
				}
			}
		}
	}
}




/* ||| page concerts + page concert ||| */

.more-info {
	font-size: 0.85rem; line-height: 1.2rem; padding: 4px 0;
	& hr { margin: 16px 0;}
}


/* ||| page oeuvre ||| */

.button-box {
	padding: 16px 24px 24px 24px;
	background-color: #f3f5f5; border-radius: 20px;

	& div.grid-sorting {
		display: grid; grid-template-columns: 7fr 5fr; background-color: #000; gap: 2px;

		& > div {
			background-color: #f3f5f5;

			& ul {
				display: flex; flex-direction: row; justify-content: start; align-items: stretch; gap: 9px; flex-wrap: wrap;

				& li {
					display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 4px;
					position: relative; cursor: pointer;
					background-color: #ebedef; padding: 2px 8px 3px 8px; font-size: 0.7rem; border-radius:3px; outline: 1px solid #0003;

					& svg {
						display: block; width: 18px; border-radius: 3px; margin: 0 0 0 -5px; transform: translateY(1px);
						&.close { display: none; position: absolute; top: 2px; left: 8px; fill: #777; }
					}

					&:hover {
						background-color: #f3f5f5; outline: 1px solid #0005;
						& svg.close { fill: #f3f5f5; }
					}

					&.selected {
						outline: 2px solid #0005; background-color: #444; color: #ddd;
						& svg:first-child { fill:#444 }
						& svg.close { display: block; }
					}

					&.inactive { opacity: 0.3; pointer-events: none; }
				}
			}


			&:nth-child(1) {
				grid-column: 1 / span 1; grid-row: 1 / span 1; padding: 0 24px 24px 0; outline: 0px solid pink;
				& ul li { min-width: 66px; }
			}
			&:nth-child(2) {
				grid-column: 1 / span 1; grid-row: 2 / span 1; padding: 16px 24px 0 0; outline: 0px solid yellow;
				& ul li { min-width: 112px; }
			}
			&:nth-child(3) {
				grid-column: 2 / span 1; grid-row: 1 / span 2; padding: 0 0 0 24px; outline: 0px solid cyan;
				& ul li { min-width: 160px; }
			}
			/* &:nth-child(4) { padding: 12px 0 0 12px; outline: 0px solid lime; } */
		}
	}
}

ul.info-ref {

	margin: 0;
	padding: 1rem 0 32px 0;


	font-family: var(--font-family-mono);

	& li {
		font-size: 0.85rem; line-height: 1rem; padding: 0.35rem 0 0.35rem 0;
		display: flex; flex-direction: row; justify-content: space-between; align-items: start;
		border-bottom: 1px solid #0001;
		/* color: var(--color-grey); */

		& span:nth-child(1) { opacity: 0.6; min-width: 64px;}
		& span:nth-child(2) {
			text-align: right;

			& svg { width: 22px; height: 22px; margin: -6px 0; }
		}
	}


}

div.bloc-oeuvre-suite {
	background: linear-gradient(90deg, #0001, #0000);
	border-radius: 7px; padding: 32px 0 32px 32px; margin-bottom: 3rem;

	opacity: 0;
	animation-name: anim_fromRight-32;
	animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
	animation-delay: 800ms;

	& ul.oeuvre-suite {
		margin: 1.5rem 0 0 -32px; padding: 0;
		& li {
			 list-style-type: none;
			& a {
				border-bottom: 1px dotted #0002; text-decoration: none; line-height: 1rem; opacity: 1;
				display: block; padding: 6px 0 3px 32px;
				display: flex; flex-direction: row; justify-content: space-between; align-items: center;
				transition: all 150ms ease;

				& span {
					&.ref-or-ico {
						/* border: 1px solid red; */
						font-family: var(--font-family-mono); font-size: 0.85rem;
						& svg { width: 22px; height: 22px; margin: -6px 0; }
					}
				}

				&:hover {
					border-bottom: 1px solid var(--color-link); color: var(--color-link); opacity: 1;
					& svg { fill: var(--color-link); }
				}

				&[aria-current] {
					background: linear-gradient(#eee, #eee); pointer-events: none;
				}
				/* &[aria-current]:after { width: calc( 100% - 32px); } */


			}
		}
	}
}

/* ||| page oeuvresonore + page oeuvresmagis ||| */

.tracklist {

	max-width: 640px;


	& h1.h1,
	& h2.h2,
	& h3.h3 ,
	& h4.h4 { display: flex; flex-direction: row; justify-content: space-between; align-items: start; margin: 0; }

	& h2.h2-disc,
	& h3.h3,
	& h4.h4 {
		&:before { position: absolute; content: ''; left: -28px; width: 18px; }
	}

	& h1.h1 { font-weight: 700; font-size: 1.2rem; margin-bottom: 0rem; }

	& h2.h2 {
		font-size: 1.0rem;
	}

	& h2.h2-disc {
		position: relative;
		&:before { top: 3px; aspect-ratio: 1/1; border-radius: 50%; border: 6px solid #BBB; box-sizing: border-box; }
	}
	& h3.h3 {
		font-size: 1.0rem; margin: 1.25rem 0 1.25rem 0; position: relative;
		&:before { top: 12px; height: 2px; background-color: #000; }
	}
	& h4.h4 {
		font-size: 0.85rem; position: relative;
		&:before { top: 12px; height: 1px; background-color: #aaa; }
	}

	& details {
		outline: 0px solid #bbb; position: relative; margin-bottom: 0;
		border-top: 1px solid #0002;
		transition: all 200ms ease;

		&:before {
			position: absolute; width: 18px; height: 18px; top: 7px; left: -34px; text-align: center;
			content: "+";
			/* background-color: red; */
			opacity: 0.3;
			transition: opacity 200ms linear;
			/* background: linear-gradient(135deg,#fff0 0%, #fff0 50%, #000 50%, #000 100%); */
		}
		&:after {
			position: absolute; top: 11px; left: -34px; width: 18px; aspect-ratio: 1/1; border-radius: 50%;
			content: "";
			border: 1px solid #BBB; box-sizing: border-box;
		}

		&:hover {
			&:before {
				opacity: 1; color: var(--color-link);
				/* background: linear-gradient(135deg,#fff0 0%, #fff0 50%, var(--color-link) 50%, var(--color-link) 100%); */
			}
			&:after { border: 1px solid var(--color-link); }
		}


		& summary {
			cursor: pointer;
			display: flex; flex-direction: row; justify-content: space-between; align-items: start; margin: 0 0 0 0px; padding: 8px 0 0rem 0;

			transition: padding 200ms ease;
			&:hover { color: var(--color-link);}
		}



		&[open] {
			border-top: 2px solid #0008;
			margin-bottom: 3rem;
			/* outline: 1px solid green; */

			&:before {
				opacity: 1; content: "-";
			}

			& summary {
				padding: 8px 0 1.5rem 0;
			}

		}
	}

	& ol {
		margin-left: 0; padding: 0; border-bottom: 1px solid #e5e5e5;
		line-height: 1.1rem;

		& li {
			list-style-position: inside;
			display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 2px 0 0px 0;
			border-top: 1px solid #e5e5e5;

			& > span {
				width: 80%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;

				& span small,
				& b { font-family: "Chivo Mono", monospace; font-size: 0.7rem; }

				& span small { display: inline-block; width: 28px; outline: 0px solid grey; margin: 0 10px 0 -40px; text-align: right; font-size: 0.7rem; }
				& b { display: inline-block; width: 36px; text-align: left; opacity: 0.3 }
			}

			& em { text-align: left; font-family: georgia, serif; font-size: 0.85rem; font-style: normal; color: #444; }
		}
	}
}

.working-bloc { margin-top: 12px; border-top: 1px solid #ddd;}





div.galerie {
	position: relative;
	background: linear-gradient( 90deg, #ddd0, #ddd);
	min-height: 50vh;

	& div.galerie-nav {
		/* border: 1px solid grey; */
		position: absolute; right: 0; top: 0;
		padding: 1rem;
		display: none; flex-direction: row-reverse; justify-content: center; align-items: start;

		& div.galerie-nav-index {
			/* border: 1px solid grey; */
			margin: 0 2rem 0 0; max-width: 360px;
			display: flex; flex-direction: row; justify-content: start; align-items: start; flex-wrap: wrap;
			& i {
				display: block; width: 17px; height: 17px; border: 1px solid var(--color-grey-b); box-sizing: border-box;
				border-radius: 50%; margin: 0 0.25rem 0.25rem 0; opacity: 1; cursor: pointer; transition: border 200ms linear;
				&:hover { border: 2px solid #000; }
				&.selected { opacity: 1; border: 2px solid #000;}
			}
		}
	}

	& ul.ul-galerie-slide {
		pointer-events: none;
		& li {
			/* border: 1px solid red; */
			position: absolute; left: 0; right: 0; opacity: 0; transition: all 900ms ease;

			& img { aspect-ratio: 3/2; object-fit: cover; }
			&.visible { display: block; opacity: 1;}
		}
	}

	& ul.ul-galerie {
		display: grid; gap: 1px;
		& li {
			& img { cursor: pointer; }
		}
	}

}










/* ----- D I S P L A Y -------------------------------- */
.d-block { display: block }
.d-none { display: none }
.d-flex { display: flex }
.d-grid { display: flex }

/* ----- R A D I U S ---------------------------------- */
.radius-5 { border-radius: 5px; }
.radius-10 { border-radius: 10px; }

.radius-20 { border-radius: 20px; }
.radius-50 { border-radius: 50%; }

/* ----- P A D D I N G -------------------------------- */
.p0{padding:0px!important;}
.p-0{padding:0px}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:16px}.p-4{padding:24px}.p-5{padding:32px}.p-6{padding:48px}
.pt-0{padding-top:0px}.pt-1{padding-top:4px}.pt-2{padding-top:8px}.pt-3{padding-top:16px}.pt-4{padding-top:24px}.pt-5{padding-top:32px}.pt-6{padding-top:48px}.pt-7{padding-top:64px}
.pb-0{padding-bottom:0px}.pb-1{padding-bottom:4px}.pb-2{padding-bottom:8px}.pb-3{padding-bottom:16px}.pb-4{padding-bottom:24px}.pb-5{padding-bottom:32px}.pb-6{padding-bottom:48px}.pb-7{padding-bottom:64px}
.pl-0{padding-left:0px}.pl-1{padding-left:4px}.pl-2{padding-left:8px}.pl-3{padding-left:16px}.pl-4{padding-left:24px}.pl-5{padding-left:32px}.pl-6{padding-left:48px}
.pr-0{padding-right:0px}.pr-1{padding-right:4px}.pr-2{padding-right:8px}.pr-3{padding-right:16px}.pr-4{padding-right:24px}.pr-5{padding-right:32px}.pr-6{padding-right:48px}
.pb-half { padding-bottom: 50vh!important; }
.pb-full { padding-bottom: 100vh!important; }

/* ----- M A R G I N ---------------------------------- */
.m-0{margin: 0px}.m-1{margin: 4px}.m-2{margin: 8px}.m-3{margin: 16px}.m-4{margin: 24px}.m-5{margin: 32px}.m-6{margin: 48px}
.mt-0{margin-top:0px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mt-5{margin-top:32px}.mt-6{margin-top:48px}.mt-7{margin-top:96px}
.mb-0{margin-bottom:0px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}.mb-5{margin-bottom:32px}.mb-6{margin-bottom:48px}.mb-7{margin-bottom:96px!important}
.ml-0{margin-left:0px}.ml-1{margin-left:4px}.ml-2{margin-left:8px}.ml-3{margin-left:16px}.ml-4{margin-left:24px}.ml-5{margin-left:32px}.ml-6{margin-left:48px}
.mr-0{margin-right:0px}.mr-1{margin-right:4px}.mr-2{margin-right:8px}.mr-3{margin-right:16px}.mr-4{margin-right:24px}.mr-5{margin-right:32px}.mr-6{margin-right:48px}
.m-center { margin: 0px auto;}

/* ----- O P A C I T Y -------------------------------- */
.op5 { opacity: 0.5; }
.op3 { opacity: 0.3; }
.op2 { opacity: 0.2; }
.op1 { opacity: 0.1; }

/* ----- T E X T -------------------------------------- */

.small { color: var(--color-code-comment); /* opacity: 0.4;*/ }

.smal { font-size: 0.9rem;}
.smil { font-size: 0.8rem;}
.tiny { font-size: 0.75rem; line-height: 1.0rem; padding-top: 0.325rem; }
.riki { font-size: 0.65rem; line-height: 1.0rem; padding-top: 0.325rem; }

.whgt-1 { font-weight: 100;}
.whgt-3 { font-weight: 300;}
.whgt-7 { font-weight: 700;}
.whgt-9 { font-weight: 900;}

.txt-left { text-align: left; }
.txt-rigt { text-align: right; }
.txt-uppr { text-transform: uppercase; }
.txt-lowr { text-transform: lowercase; }
.txt-sp-1 { letter-spacing: 0.1em; }
.txt-undr { text-decoration: underline; text-underline-offset: 4px;}
.txt-bare { text-decoration: line-through;}





@keyframes anim_opacity-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes anim_fromLeft-32 {
	from { opacity: 0; transform: translate(-32px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromLeft-64 {
	from { opacity: 0; transform: translate(-64px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromLeft-96 {
	from { opacity: 0; transform: translate(-96px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromLeft-128 {
	from { opacity: 0; transform: translate(-128px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromLeft-192 {
	from { opacity: 0; transform: translate(-192px,0); }
	to { opacity: 1; transform: translate(0,0); }
}


@keyframes anim_fromRight-32 {
	from { opacity: 0; transform: translate(32px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromRight-64 {
	from { opacity: 0; transform: translate(64px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromRight-96 {
	from { opacity: 0; transform: translate(96px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromRight-128 {
	from { opacity: 0; transform: translate(128px,0); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromRight-192 {
	from { opacity: 0; transform: translate(192px,0); }
	to { opacity: 1; transform: translate(0,0); }
}


@keyframes anim_fromTop-32 {
	from { opacity: 0; transform: translate(0,-32px); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromTop-64 {
	from { opacity: 0; transform: translate(0,-64px); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromTop-96 {
	from { opacity: 0; transform: translate(0,-96px); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromTop-128 {
	from { opacity: 0; transform: translate(0,-128px); }
	to { opacity: 1; transform: translate(0,0); }
}


@keyframes anim_fromBottom-32 {
	from { opacity: 0; transform: translate(0,32px); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromBottom-64 {
	from { opacity: 0; transform: translate(0,64px); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromBottom-96 {
	from { opacity: 0; transform: translate(0,96px); }
	to { opacity: 1; transform: translate(0,0); }
}
@keyframes anim_fromBottom-128 {
	from { opacity: 0; transform: translate(0,128px); }
	to { opacity: 1; transform: translate(0,0); }
}

@keyframes anim_scale-in-1 {
	from { opacity: 0; transform: scale(1.1,1.1); }
	to { opacity: 1; transform: scale(1.0,1.0); }
}







@media screen and (min-width: 25rem) {
	.footer div.grid-plan { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 40rem) {
	.footer div.grid-plan { grid-template-columns: repeat(3, 1fr); }
	.h1,
	.intro {
		font-size: 2rem;
		margin-bottom: 3rem;
		line-height: 1.25em;
	}
}
@media screen and (min-width: 50rem) {
	.menu { display: flex; }
	div.btn-menu { display: none;}
	div#menuMobil { display: none;}
	.footer div.grid-plan { grid-template-columns: repeat(5, 1fr); }
	div.galerie div.galerie-nav{ display: flex; }
}
@media screen and (min-width: 60rem) {
	body {
		--padding: 3rem;
	}
	.grid {
		grid-template-columns: repeat(12, 1fr);
	}
	.grid > .column {
		grid-column: span var(--columns);
	}

	.logo { font-size: 2rem; margin-top: -6px; }
}
@media screen and (min-width: 70rem) {}




.only-user {
	position: relative;
	outline: 1px solid var(--color-grey-b-light); border-radius: 2px; outline-offset: 8px; padding: 64px 0 0 0; margin: 12rem 0 0 0;

	& b.user-close {
		position: absolute; left: 4px; top: 0px; width: 128px; font-size: 1.25rem; color: var(--color-grey-b); cursor: pointer;
		&:hover { color: #000;}
	}
	&:after { content: "Section visible uniquement des éditeurs du site"; position: absolute; right: 4px; top: -4px; font-size: 0.7rem; color: var(--color-grey-b); }

	& details {
		& summary {
			padding: 12px 0; cursor: pointer;
			border-top: 1px solid var(--color-grey-b-light);
			/* outline: 1px solid #1D8EFF77; */

			&:hover {
				color: var(--color-link);
			}
		}
		> div { margin-top: 3rem; }
	}
}