/*  ---
	VARIABLES / TYPOS
		---
*/
:root {
	--c1: orange;
	--c2: #3272AF;
	--c3: #568A83;
	--c4: #9BBBDC;
	--c5: #AC5395;
	--menu-height: 3.4rem;
	--width-affiche: 45%;
}

@font-face {
	font-family: 'SpaceMono-Regular';
	src: url(../typos/SpaceMono-Regular.ttf) format("truetype");
}
@font-face {
	font-family: 'SpaceMono-Bold';
	src: url(../typos/SpaceMono-Bold.ttf) format("truetype");
}
@font-face {
	font-family: 'SpaceMono-Italic';
	src: url(../typos/SpaceMono-Italic.ttf) format("truetype");
}
@font-face {
	font-family: 'SpaceMono-BoldItalic';
	src: url(../typos/SpaceMono-BoldItalic.ttf) format("truetype");
}
@font-face {
 	font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../typos/fa-brands-400.woff2) format("woff2"),
  		 url(../typos/fa-brands-400.woff) format("woff"),
  		 url(../typos/fa-brands-400.ttf) format("truetype");
}
.fab {
	font-family: "Font Awesome 5 Brands";
	-moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 400;
}


/*  ---
	GLOBAL
		---
*/
html {
	scrollbar-color: #000000 #00000022;
	scrollbar-width: none !important;
}

body {
	margin: 0;
	font-family: 'SpaceMono-Regular';
	font-size: 0.6rem;
	color: black;
}

a {
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

img {
	max-width: 100%;
	object-fit: cover;
}

h2 {
	font-family: 'SpaceMono-Bold';
	font-size: 4em;
	text-align: center;
}
h3 {
	font-size: 3em;
	font-weight: 400;
}
strong {
	font-family: 'SpaceMono-Bold';
}

article {
	color: whitesmoke;
	margin-bottom: 2.5em;
	scrollbar-width: none;
}
article, body, html {
	height: 100%;
}
pre {
	white-space: normal !important;
}


/*  ---
	ADMINBAR
		---
*/
html:has(.admin-bar) {
	scroll-padding-top: 172px;
}
body.admin-bar :is(#floating-head, #half-modal, .content, .affiche img) {
	margin-top: 32px;
}
body.admin-bar .main {
	margin-top: -32px;
} 
body.admin-bar #half-modal {
	padding-bottom: 32px;
}


/*  ---
	HEADER.PHP
		---
*/
#floating-head {
	z-index:100;
	background: whitesmoke;
	position: fixed;
	top: 0; left: 0;
	box-sizing: border-box;
	white-space: nowrap;
	width: 100%;
	height: 3.4rem; height: var(--menu-height);
}

.flex-top {
	display: flex;
	flex-direction: row;
	height: 100%;
}

.flex-menu {
	list-style: none; /*removes li styling */
	display: flex;
	align-items: center;
	flex-grow: 1;
	font-size: 1.25rem;
	color: black;
}
.flex-menu.en .menu-item {
	padding: 0 2em 0 2em;
}
.flex-menu.fr .menu-item {
	padding: 0 1.75em 0 1.75em;
}
.flex-menu .menu-item:first-of-type {
	height: 60%; /* size logo efest */
}
.flex-menu .menu-item:nth-last-of-type(2) {
	margin-left: auto; /*aligne Billeterie à droite */
}

.flex-menu a {
	text-decoration: none;
	transition: all .2s;
}
.flex-menu a:hover {
	color: #a44154;
}
.current-section {
	text-decoration: underline !important;
}

.flex-menu svg {
  height: 100%;
  width: auto;
}
svg.logo {
	transition: fill .2s;
	fill: #020304;
}
svg.logo:hover {
	fill: currentColor;
}

/* cas particulier pour le lien billetterie du menu */
.flex-menu .color-zone {
	padding: 0 !important;
	background-clip: text;
	-webkit-background-clip: text;
}


/*  ---
	COULEURS & AJUSTEMENTS TYPO
		---
*/
article.type-ateliers, article.type-en_ateliers, .ateliers-c {
	background: #3272AF; background: var(--c2);
}
article.type-artistes, article.type-en_artistes, .musique-j, .musique-f {
	background: #568A83; background: var(--c3);
}
article.type-infos-pratiques, article.type-en_infos-pratiques, .infosp {
	background: #9BBBDC; background : var(--c4);
	color: black;
}
.partenaires {
	background: #AC5395; background : var(--c5);
}
.contact {
	background: #AC5395; background : var(--c5);
}

#edito {
	letter-spacing: 0.03em;
}
.m-artists .flex-hoverbox div:first-of-type, .single-article .title .artiste {
	letter-spacing: 0.05em;
}
.ateliers-c .flex-hoverbox div:nth-of-type(2) {
	letter-spacing: 0.03em;
}


/*  ---
	BACKGROUND PHYLACTERES
		---
*/
svg#bk {
	z-index: -1;
	position: fixed;
	top: 0%; left: 45%; left: var(--width-affiche);
}
svg#bk polygon {
	transform-box: content-box;
	transform-origin: center;
}
svg#bk g#g1 polygon:is(#a,#e,#d,#b) {
	transform: scale(10) translate(-1px, 4px);
}
svg#bk g#g1 polygon#c {
	transform: scale(2);
}


/*  ---
	HOME
		---
*/
.main {
	height: 100%; width: 100%;
	position: fixed;
	padding-top: 3.4rem; padding-top: var(--menu-height);
	box-sizing: border-box;
	background: linear-gradient(180deg, #9BBBDC 0%, orange 50%, #AC5395 100%);
	background: linear-gradient(180deg, var(--c4) 0%, var(--c1) 50%, var(--c5) 100%);
	background-size: 100% 1000%;
}
.affiche {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 100%; 
	width: 45%; width: var(--width-affiche);
}
.affiche svg {
	aspect-ratio: 15/20;
	fill: #ffdbbc;
	margin-bottom: 3em;
	height: 116%;
}
.main .content {
	position: absolute;
	height: 93%;
	width: 100%;
	/* vertical scrollbar */
	overflow: hidden auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}
.color-containers {
	padding-left: 45%; padding-left: var(--width-affiche);
	background: transparent;
}
.color-zone {
	padding: 5em;
}

.page-title {
	margin-top: 0;
	margin-bottom: 1.5em;
}
.page-content {
	font-size: 2em;
	margin: 1.5em 0.5em 3em 1em;
}
.page-content#edito {
	padding-left: 45%; padding-left: var(--width-affiche);
	margin-left: 2em;
	padding-top: 0.5em;
	padding-right: 2em;
	color: black;
	max-width: 1000px;
}
#edito p:first-of-type {
	margin-bottom: 3em;
}

.musique-j {
	padding-top: 3em;
}
.musique-j h2 {
	text-align: right;
	margin-right: 0.5em;
	margin-top: 0;
	font-size: 5em;
}

.flex-hoverbox {
	position: relative;
  display: flex;
  gap: 1rem;
  font-size: 1.8em;
  padding: 0.5em;
  outline: 1px solid black;
  overflow: hidden;
  transition: background 0.3s ease-out;
}
.flex-hoverbox:hover {
	background: #6cb6c7 !important;
	outline: none;
}
.flex-hoverbox a {
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
	text-decoration: none;
}

.musique-j .flex-hoverbox .date {
	flex: 3;
}
.musique-j .flex-hoverbox .artistes {
	flex: 7;
}
.musique-j .flex-hoverbox .artistes span::after {
	padding-left: 0.3em; padding-right: 0.3em; 
	content: '-';
}
.musique-j .flex-hoverbox .artistes span:last-child::after {
	content: '';
}

.ateliers-c .categorie {
	margin-bottom: 10em;
}
.flex-title {
	display: flex;
	align-items: baseline;
	font-family: 'SpaceMono-Bold';
	font-size: 5em;
	line-height: 1.2em;
	margin: 0 0.5em 0.83em 0.5em;
}

.flex-title .desc {
	flex: 1;
	text-align: end;
	font-family: 'SpaceMono-Italic';
	font-size: 0.62em;
}
.flex-title .desc::before {
	content: '>';
	padding: 0.4em;
	margin-left: 0.2em;
}
.flex-title > span:first-of-type {
	align-self: end;
}
.ateliers-c .categorie:nth-of-type(even) > .flex-title > span:last-of-type
{
	order: -1;
	text-align: start;
}
.ateliers-c .categorie:nth-of-type(even) > .flex-title > span:first-of-type
{
	text-align: end;
}

.ateliers-c .flex-hoverbox {
	align-items: center;
	min-height: 3em;
}
.ateliers-c .flex-hoverbox div:first-of-type {
	flex: 0.3;
	margin-left: 0.5em;
}
.ateliers-c .flex-hoverbox div:last-of-type {
	flex: 0.2;
	text-align: end;
	margin-right: 0.5em;
}
.ateliers-c .flex-hoverbox div:nth-of-type(2) {
	font-family: 'SpaceMono-Bold';
	flex: 0.5;
	margin-left: 1.5em;
}
.ateliers-c .flex-hoverbox div:nth-of-type(2)::before {
	content: "\2197";
	margin-left: -1.6em;
	margin-right: 1em;
}
.ateliers-c .flex-hoverbox:is(:hover, .current) div:nth-of-type(2)::before {
	content: "\2192";
}
.ateliers-c .flex-hoverbox.closed div:nth-of-type(2)::before {
	/* utile quand je suis en hover et que je reclique pour fermer */
	content: "\2197" !important; 
}

.musique-f .m-jour {
	margin-top: 10em;
}
.musique-f .m-jour:first-of-type {
	margin-top: 0;
}
.musique-f .m-jour .description {
	font-family: 'SpaceMono-Italic';
	font-size: 2em;
}

.musique-f .m-stage {
	margin-bottom: 4em;
}
.musique-f .m-stage > h3 {
	padding-left: 0.9em;
}

.m-artists .flex-hoverbox {
	justify-content: center;
	align-items: center;
	min-height: 1.9em;
}
.m-artists .flex-hoverbox div:first-of-type {
	font-family: 'SpaceMono-Bold';
	font-size: 1.15em;
	flex: 1;
	padding-left: 1em;
}
.m-artists .flex-hoverbox div:last-of-type {
	max-width: 40%;
	margin-right: 0.5em;
}
.m-artists .flex-hoverbox div:first-of-type::before {
	margin-right: 1em;
	content: "\2197";
}
.m-artists .flex-hoverbox:is(:hover, .current) div:first-of-type::before {
	content: "\2192";
}
.m-artists .flex-hoverbox.closed div:first-of-type::before {
	/* utile quand je suis en hover et que je reclique pour fermer */
	content: "\2197" !important; 
}


/*  ---
	MODAL
		---
*/
dialog {
	z-index: 10;
  position: fixed;
  height: 100%;
  width: 45%; width: var(--width-affiche);
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  transition: transform 0.5s ease;
}
dialog.hidden1 {
	transform: translateY(100%) skew(30deg, 20deg);
}
dialog.hidden2 {
	transform: translateX(-100%) skew(-30deg, -20deg);
}
dialog iframe {
	scrollbar-width: thin;
	transition: opacity 0.05s cubic-bezier(.29, 1.01, 1, -0.68);
}
dialog iframe.loading {
	opacity: 0;
}

.close-button {
  position: absolute;
  top: 0; left: 0;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: 1;
}
.close-button::before {
	font-family: 'SpaceMono-Bold';
	content: "\2248";
}
.close-button:hover {
  color: white;
}


/*  ---
	SINGLE-*.PHP
		---
*/
.single-article {
	padding: 1em 1em 4em 1em;
	font-size: 0.85em;
}
.single-article img {
	object-fit: cover;
	max-width: 100%;
	height: auto;
	max-height: 500px;
}

.single-article .thumbnail {
	margin-top: 0.5em;
}
.single-article .title {
	padding: 0 2em 0.5em 2em;
	font-size: 1em;
}
.single-article .title .artiste {
	font-family: 'SpaceMono-Bold';
	font-size: 4em;
	margin-bottom: 0.5em;
}

.single-article .title .meta {
	font-family: 'SpaceMono-Italic';
	text-align: end;
	font-size: 2.5em;
}
.single-article .meta .style {
	margin-right: 0.3em;
}
.single-article .meta .origine {
	margin-left: 0.3em;
}

.single-article .description {
	font-size: 1.95em;
	margin: 1.5em 2em 3em 1em;
}

.single-article .timetable {
	font-size: 1.8em;
	text-align: end;
	color: #ffdbbc;
	margin: 0 -0.25em 1.5em 0;
}
.single-article .timetable>span {
	padding: 0.5em 1.3em 0.5em 1.3em;
	box-sizing: border-box;
	outline: solid 1px #ffdbbc;
}
.single-article .timetable > span > span:not(:first-of-type)::before {
	margin: 0 0.75em 0 0.75em;
	font-style: initial;
	content: '>';
}
.single-article .timetable > span > span:last-of-type::before {
	content: '<';
}


/*  ---
	CONTACT
		---
*/
#contact {
	padding-bottom: 1em;
}

.flex-social {
	display: flex;
	justify-content: center;
	padding-top: 1em;
}
.icon {
  font-size: 1.1em;
  flex: 1;
}
.icon > a {
	margin-left: 50%;
}
.fa-facebook:before {
    content: "\f09a";
}
.fa-instagram:before {
    content: "\f16d";
}
.fa-youtube:before {
    content: "\f167";
}
.fa-linkedin:before {
    content: "\f08c";
}

.newsletter {
	text-align: center;
	font-size: 0.85rem;
  padding-top: 3em;
}

.newsletter .btn {
	display: inline-block;
	border: solid 2px rgba(0, 0, 0, 0.6);
	border-top-width: 1px;
	border-radius: 6px;
	background: transparent;
	transition: transform 200ms, background 200ms;
}
.newsletter .btn:hover {
	transform: translateY(-2px);
	background: rgba(0, 0, 0, 0.9);
}
.newsletter .btn a {
	display: inline-block;
	width: auto;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	box-sizing: border-box;
	color: black;
	text-decoration: none;
}
.newsletter .btn:hover a {
	color: #FFFFFF;
}


/*  ---
	AFFICHE SMARTPHONE
		---
*/
.affiche-b {
		position: relative;
    display: none; /*rendu visible par media query*/
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
    height: 100vh;
    background: linear-gradient(180deg, var(--c4) 0%, var(--c1) 50%, var(--c5) 100%);
    background-size: 100% 400%;
    background-size: 100% 100%;
}
.affiche-b svg {
	fill: #ffdbbc;
	/*margin-bottom: 10%;*/
	height: 100%;
	aspect-ratio: 15/20;
	max-width: 130%;
	overflow: visible;
}
.affiche-b > a {
	position: absolute;
	z-index: 100;
	font-size: 1.8rem;
	text-decoration: none;
	white-space: nowrap;
	color: white;
}

.affiche-b>a[href="#edito"] {
	top: 0;
	left: 0;
	margin: 0.25em 0 0 1em;
	width: 50%;
}
.affiche-b>a.lang {
	top: 0;
	right: 0;
	font-size: 2em;
	margin: 0.2em 1em 0.5em 1em;
}
.affiche-b>a[href="#prog"] {
	bottom: 0;
	margin: 0 2em 0.5em 0;
	text-align: end;
	width: 100%;
}

.affiche-b>a[href="#edito"]>span {
	display: inline-block;
	margin-left: 1.5em;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}
.affiche-b>a[href="#prog"]>span {
	display: inline-block;
	margin-right: 1.5em;
	transform: rotate(-45deg);
	transition: transform 0.25s ease;
}

.affiche-b>a.straight>span {
	transform: none;
}


/*  ---
	RESPONSIVE
		---
*/

@media (max-width: 1400px) {
	:root {
		--menu-height: 3rem;
	}
	nav.flex-menu {
		font-size: 1.2rem;
	}
}
@media (max-width: 1200px) {
	:root {
		--menu-height: 2.8rem;
	}
	nav.flex-menu {
		font-size: 1.05rem;
	}
}
@media (max-width: 1100px) {
	:root {
		--menu-height: 2.5rem;
	}
	nav.flex-menu {
		font-size: 1rem;
	}
}
@media (max-width: 1000px) {
	:root {
		--menu-height: 2.35rem;
		--width-affiche: 37%;
	}
	nav.flex-menu {
		font-size: 0.9rem;
	}
}
@media (max-width: 900px) {
	:root {
		--menu-height: 2.1rem;
	}
	nav.flex-menu {
		font-size: 0.8rem;
	}
}


@media (max-width: 800px) {
	:root {
		--menu-height: 0;
		--width-affiche: 0;
	}
	body.admin-bar :is(#floating-head, #half-modal, .content) { margin-top:0 !important; }
	body.admin-bar #half-modal { padding-bottom:0 !important; }
	body.admin-bar .main { margin-top:-46px !important; } 
	
	h2 { font-size: 3.5em; }
	h3 { font-size: 2.5em; }

	dialog#half-modal { width: 100%; }

	.close-button {
		color: white;
		border: 2px solid white;
		margin: 1px 0 0 1px;
		padding: 0 0.3rem 0 0.3rem;
	}
	.close-button::before {
		content: "\2190";
	}

	.main > .affiche { display:none; width: 0; /*width-affiche*/}
	.color-containers { padding-left: 0; /*width-affiche*/}
	#floating-head { display: none; }
	svg#bk { left: 0;/*width-affiche*/ width: 100%; }
	
	.main .content { 
		height: 100%; 
		scroll-padding-top: 0;
		scrollbar-width: none;
	}
	.affiche-b {
		display: flex !important;
	}

	.page-content#edito {
		padding-left: 0; /*width-affiche*/
		margin-left: 1em;
		padding-top: 0.5em;
		padding-right: 1em;
	}
	.color-zone {
		padding: 2em;
	}

	.musique-j .flex-hoverbox {
		flex-direction: column;
		padding: 1em;
	}
	.musique-j .flex-hoverbox .date {
	    font-family: 'SpaceMono-Bold';
	    letter-spacing: 0.1em;
	    font-size: 1.25em;
	}
	.musique-j .flex-hoverbox .artistes {
	    font-size: 1.5em;
	}

	.ateliers-c .flex-hoverbox {
	    font-size: 2.1em;
	}
	.flex-title {
		flex-direction: column;
	}
	.flex-title .desc {
		font-size: 0.6em;
		line-height: 1.4em;
		margin-top: 0.5em;
	}
	.ateliers-c .categorie { margin-top: 2.5em; margin-bottom: 8em; }
	.ateliers-c .categorie:nth-of-type(odd) > .flex-title > span:first-of-type {
		align-self: start;
	}
	.ateliers-c .categorie:nth-of-type(even) > .flex-title > span:last-of-type {
		text-align: end;
		order: initial;
	}
	.ateliers-c .flex-hoverbox div:first-of-type {
		font-size: 1.2em;
		flex: 0.8;
	}
	.ateliers-c .flex-hoverbox div:first-of-type::before {
		content: "\2197";
		font-family: 'SpaceMono-Bold';
		margin-right: 0.85em;
	}
	.ateliers-c .flex-hoverbox div:nth-of-type(2) {
	    display: none;
	}
	.ateliers-c .flex-hoverbox:active div:first-of-type::before {
		content: "\2192";
	}

	.musique-f .m-jour {
	    margin-top: 0;
	    padding-top: 1em;
	}
	.m-artists .flex-hoverbox {
		padding-left: 0;
	}
	.m-artists .flex-hoverbox div:first-of-type {
    font-size: 1.4em;
	}
	.m-artists .flex-hoverbox div:last-of-type {
    display: none;
	}
	.m-artists .flex-hoverbox:active div:first-of-type::before {
		content: "\2192";
	}

	.color-zone:is(.infosp, .partenaires) {
		padding: 5em 2em 5em 2em;
	}

	.page-content {
		margin: 1.5em 0.6em 3em 0.6em;
		font-size: 2.35em;
	}
	.infosp .flex-hoverbox {
		font-size: 2.25em;
		padding: 0.8em 1em 0.8em 1em;
	}
	
}

@media (max-width: 400px) {
	.single-article .timetable {
	    font-size: 1.5em;
	}
	.flex-title {
		font-size: 4.5em;
	}
	.ateliers-c > .categorie:nth-of-type(even) > .flex-title > span:first-of-type {
			align-self: center;
	}
	.ateliers-c .flex-hoverbox {
		font-size: 1.9em;
	}

}