@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Zeyada&display=swap');

:root {
    --black: #000;
    --white: #fff;
    --primary-color: #2C87C2;
    --primary-color-lighter: #e5e5f7;
    --secondary-color: #D2691E;
    --secondary-color-lighter: rgba(210, 105, 30, .8);
	--lion-green: #42B14A;
	--giant-purple: #903D80;
	--logo-font: "Zeyada", cursive;
	--title-font: "Amatic SC", sans-serif;
	--body-font: "Tahoma", "Lucida Console", sans-serif;
}

html {
    font-size: 1rem;
}

body {
    background-color: var(--white);
    color: var(--black);
	display: grid;
	flex-direction: column;
    font-family: var(--body-font);
    font-size: 1rem;
	grid-template-columns: 1fr 5em;
	grid-template-rows: 4em 1fr 3em;
	min-height: 100vh;
}
@media screen and (min-width: 36em) {

}
@media screen and (min-width: 62em) {
	body {
		grid-template-columns: 18.75em 1fr;
		grid-template-columns: 17em 1fr;
		grid-template-rows: 5em 1fr 3em;
	}	
}
@media screen and (min-width: 83.125em) {
	
}

a {
    color: var(--primary-color);
}
a:focus,
a:hover,
a:active {

}

h1, h2 {
    font-family: var(--title-font);
}

dl div {
	display: flex;
	flex-wrap: wrap;
}
dl dt {
	margin-right: 1ch;
}
dl dd {
	margin-left: 0;
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    position: relative;
    width: 100%;
}

.page-title {
	font-size: 2rem;
}
.title-2 {
	font-size: 1.625em;
}
@media screen and (min-width: 36em) {
	.page-title {
		font-size: 2.25rem;
	}
	.title-2 {
		font-size: 1.75.rem
	}
}
@media screen and (min-width: 62em) {
	.page-title {
		font-size: 2.5rem;
	}
	.title-2 {
		font-size: 1.875rem;
	}
}
@media screen and (min-width: 83.125em) {
	.page-title {
		font-size: 3rem;
	}	
	.title-2 {
		font-size: 2em;
	}
}

/* skip links */

.skip-links {
	display: none;
}

/* header */

.header {
	background-color: var(--primary-color);
	color: var(--white);
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 1;
	justify-content: center;
	transition: background-color ease 1.5s;
}
.header .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	padding-right: 0;
}
@media screen and (min-width: 36em) {

}
@media screen and (min-width: 62em) {
	.header {
		grid-column: 1 / span 2;
	}	
}
@media screen and (min-width: 83.125em) {
	
}

.logo {
	background-color: transparent;
	color: var(--white);
    font-family: var(--logo-font);
	font-size: 2em;
	text-decoration: none;
}
.logo:focus, 
.logo:hover, 
.logo:active {
	background-color: transparent;
	color: var(--white);
	text-decoration: none;
}
@media screen and (min-width: 36em) {
	.logo {
		font-size: 2.5em;
		text-align: left;
	}
}
@media screen and (min-width: 62em) {
	.logo {
		font-size: 2.625em;
	}
}
@media screen and (min-width: 83.125em) {
	.logo {
		font-size: 3em;
	}	
}

/* menu */

.menu {/*
	background: linear-gradient(135deg, #2C87C255 25%, transparent 25%) -14px 0/ 28px 28px, linear-gradient(225deg, #2C87C2 25%, transparent 25%) -14px 0/ 28px 28px, linear-gradient(315deg, #2C87C255 25%, transparent 25%) 0px 0/ 28px 28px, linear-gradient(45deg, #2C87C2 25%, #e5e5f7 25%) 0px 0/ 28px 28px;*/
	background-color: var(--primary-color-lighter);
	box-shadow: .5em 0 .8em rgba(0, 0, 0, .1);
	grid-column: 2 / span 1;
	position: relative;
}
.menu__button {
	background-color: var(--primary-color);
	color: var(--white);
	display: block;
	font-size: .875em;
	height: 100%;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}
.menu__nav {
	background-color: var(--white);
	display: none;
	position: absolute;
	right: 0px;
	top: 100%;
	width: 100vw;
	z-index: 1;
}	
.menu__button[aria-expanded="true"] + .menu__nav {
	display: block;
}

@media screen and (min-width: 36em) {

}
@media screen and (min-width: 62em) {
	.menu {
		grid-column: 1 / span 1;
	}
	.menu__button {
		display: none;
	}	
	.menu__nav {
		display: block;
		padding: 1em 0;
		position: static;
		width: auto;
	}	
}
@media screen and (min-width: 83.125em) {
	
}

.menu .menu__items {
	margin-bottom: 1em;
}

.menu .menu__item {
	display: block;
	position: relative;
}

.menu .menu__link {
	background-color: var(--white);
	border-bottom: .0625rem solid var(--primary-color-lighter);
	display: block;
	padding: .5em 1.25em;
	text-decoration: none;
	transition: background-color ease .3s;
}
.menu .menu__link:hover,
.menu .menu__link:focus,
.menu .menu__link:active {
	background-color: var(--primary-color);
	color: var(--white);
}
/*
.submenu {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}
.menu .menu__item:hover .submenu,
.submenu:focus-within {
	clip: auto !important;
	-webkit-clip-path: none !important;
		clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
	padding-left: 1.875rem !important;
	position: static !important;
}
.submenu__link {
	display: block;
	padding: .25rem;
	text-decoration: none;
}
.submenu__link:hover,
.submenu__link:focus,
.submenu__link:active {
	text-decoration: none;
}
*/
.submenu__link {
	background-color: var(--white);
	border-left: .5rem solid var(--primary-color);
	color: var(--primary-color);
	display: block;
	padding: .5em 1.25em .5em 2.25em;
	text-decoration: none;
}
.submenu__link:hover,
.submenu__link:focus,
.submenu__link:active {
	background-color: var(--primary-color);
	color: var(--white);
	text-decoration: none;
}
.submenu__link:last-of-type {
	border-bottom: .0625rem solid var(--primary-color-lighter);
}

.social__items {
	padding-left: 1.25em;
	padding-right: 1.25em;
}

.social__item--facebook .social__link {
	border: .125em solid transparent;
	border-radius: 100%;
	display: block;
	transition: border-color ease .3s;
	width: 2em;
}
.social__item--facebook .social__link:hover,
.social__item--facebook .social__link:focus,
.social__item--facebook .social__link:active {
	border-color: var(--black);
}

/* main */

.main {
	flex-grow: 1;
	grid-column: 1 / span 2;
	padding: 1em 0;
}
@media screen and (min-width: 36em) {

}
@media screen and (min-width: 62em) {
	.main {
		grid-column: 2 / span 1;
	}
}
@media screen and (min-width: 83.125em) {
	
}

/* footer */

.footer {
	background-color: #000;
	color: #fff;
	grid-column: 1 / span 2;
	margin-top: auto;
	padding-top: .75em;
	padding-bottom: .75em;
}
.footer .container {
	max-width: none;
}
@media screen and (min-width: 36em) {

}
@media screen and (min-width: 62em) {
	.footer {
		grid-column: 1 / span 2;
	}
}
@media screen and (min-width: 83.125em) {
	
}

.footer-links {
	display: flex;
	font-size: .75rem;
	margin-bottom: 0;
	padding-left: 0;
}
@media screen and (min-width: 62em) {
	.footer-links {
		font-size: .875rem;
	}
}

.footer-links__item {
	display: block;
}

.footer-links__link {
	color: #fff;
}
.footer-links__link:hover,
.footer-links__link:focus,
.footer-links__link:active {
	color: var(--white);
	text-decoration: none;
}

/* utility */

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
		clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}



/* homepage */

.homepage .main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
}
.homepage .main .container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
}

.homepage .page-title {
	margin: 1em auto;
	text-align: center;
}
/*
.homepage .page-title span {
	display: block;
}
*/
@media screen and (min-width: 36em) {
	.homepage .page-title {
		margin: auto;
	}
}
@media screen and (min-width: 62em) {

}
@media screen and (min-width: 83.125em) {
	
}
.artenreel {
	background-color: #fff;
	display: block;
	margin: 0 auto;
	max-width: 15em;
}


/* la compagnie */

/* agenda */

.page-agenda h3 {
	background-color: var(--primary-color);
	color: var(--white);
	display: inline-block;
	padding: 0 .25em;
}

.show-name {
	display: inline-block;
	font-weight: 400;
	padding: .125em;
	position: relative;
}
.show-name::after {
	bottom: .125em;
	bottom: .3125em;
	content: '';
	display: block;
	position: absolute;
	width: calc(100% - .25em);
}
.show--lion .show-name {

}
.show--lion .show-name::after {
	border-bottom: .0625em solid var(--lion-green);
}
.show--winter .show-name {

}
.show--winter .show-name::after {
	border-bottom: .0625em solid var(--black);
}
.giant .show-name::after {
	border-bottom: .0625em solid var(--giant-purple);
}

/* contact */
.page-contact .page-title {
	margin-bottom: 3em;
}

.page-contact .contact-us {
	font-size: 1.125em;
}

/* spectacles */

.cards {
	grid-template: repeat(1fr, 1fr);
	display: grid;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: -1.25rem;
	margin-right: -1.25rem;
	padding-left: .625rem;
	padding-right: .625rem;
}
.card {
	box-shadow: 0 .125rem .125rem rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
	margin-left: .625rem;
	margin-right: .625rem;
	margin-bottom: 1.25em;
	padding: 1rem;
	position: relative;
	width: 100%;
}
.card:focus-within {
	box-shadow: 0 0 .25rem .125rem var(--secondary-color);
}
.card__title {
	color: inherit;
	font-size: 2em;
	margin-bottom: .5em
}
.card__desc {
	font-family: var(--title-font);
	font-size: 1.8em;
	text-align: center;
}
.card__link {
	color: inherit;
	text-decoration: none;
}
.card__link::before {
	aspect-ratio: 1;
	content: '';
	display: block;
	left: 1rem;
	position: absolute;
	top: 1rem;
	width: calc(100% - 2rem);
}
.card__link:hover,
.card__link:focus,
.card__link:active {
	color: inherit;
	text-decoration: underline;
}
.card__desc {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}
.card__figure {
	aspect-ratio: 1;
	margin: 0 0 .75em;
	order: -1;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.card__img {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
.card__figure.horizontal .card__img {
	height: 100%;
	max-width: none;
}
.card--giant .card__figure.vertical .card__img {
	top: 100%;
	transform: translate(-50%, -100%);
}
.card--winter {
	background-color: var(--black);
	color: var(--white);
}
.card--lion {
	background-color: var(--lion-green);
	color: var(--black);
}
.card--giant {
	background-color: var(--giant-purple);
	color: var(--white);
}
@media screen and (min-width: 36em) {
	.cards {
	}
	.card {
		padding: 1.25rem;
		width: calc(50% - 1.25rem);
	}
	.card__title {
		font-size: 1.375rem;
	}
	.card__link::before {
		left: 1.25rem;
		top: 1.25rem;
		width: calc(100% - 2.5rem);
	}
	.card__desc {
		font-size: 1.2rem;
	}
}
@media screen and (min-width: 62em) {

}
@media screen and (min-width: 83.125em) {
	.card {
		width: calc(100%/3 - 1.25rem);
	}	
}

/* spectacle */

.page-show .main {
	padding: 0;
}

.page-show .section {
	padding-bottom: 1em;
	padding-top: 1em;
}

.page-show .page-title,
.page-show .title-2 {
	color: inherit;
}

.page-show .section figure {
	margin: 0 auto 1rem;
	max-width: 32em;
	text-align: center;
}
.page-show .section figure img + img {
	margin-top: 1rem;
}
.diptych .img {
	margin-top: 1rem;
}
.page-show .section figure .figure-group img {
}
.page-show .section figure .figure-group img + img {
	margin-top: 0;
}
.page-show .section figcaption {
	font-size: .75rem;
	text-align: right;
}

.page-show .section.text-large {
	font-size: 1.25rem;
}
.page-show .section.text-large p:last-child {
	margin-bottom: 0;
}
@media screen and (min-width: 36em) {
	.page-show .section.text-large {
		padding-bottom: 2rem;
		padding-top: 2rem;
	}
	.page-show .section.text-large .container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.diptych {
		display: flex;
		height: 32rem;
		margin-left: -.5rem;
		margin-right: -.5rem;
	}
	.diptych-frame {
		margin-left: .5rem;
		margin-right: .5rem;
		overflow: hidden;
		position: relative;
		width: calc(50% - 1rem);
	}
	.diptych .img {
		height: 100%;
		left: 50%;
		max-width: none;
		position: absolute;
		top: 0;
		transform: translateX(-50%);
	}
}
@media screen and (min-width: 62em) {
	.page-show .section.text-large {
		padding-bottom: 2.25rem;
		padding-top: 2.25rem;
	}
	.page-show .section.text-large .container {
		padding-left: 2.25rem;
		padding-right: 2.25rem;
	}	
}
@media screen and (min-width: 83.125em) {
	.page-show .section.text-large {
		font-size: 1.375rem;
		padding-bottom: 2.5rem;
		padding-top: 2.5rem;
	}
	.page-show .section.text-large .container {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}	
}

.page-show .actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: .75rem;
}
.page-show .actions__item {
	display: block;
}
@media screen and (min-width: 36em) {
	.page-show .actions__item {
		margin-left: .625rem;
		margin-right: .625rem;
	}
}
.page-show .action {
	display: block;
	padding: .5rem;
	text-decoration: none;
}
.page-show .action:hover,
.page-show .action:focus,
.page-show .action:active {
	text-decoration: none;
}

/* hiver */

.page-show--winter .section--dark {
	background-color: var(--black);
	color: var(--white);
}
.page-show--winter .section--dark .action {
	background-color: var(--white);
	color: var(--black);
}
.page-show--winter .section--dark .action:hover,
.page-show--winter .section--dark .action:focus,
.page-show--winter .section--dark .action:active {
	background-color: var(--white);
	color: var(--black);
}
.page-show--winter .section--light {
	background-color: var(--white);
	color: var(--black);
}
.page-show--winter .section--light .action {
	background-color: var(--black);
	color: var(--white);
}
.page-show--winter .section--light .action:hover,
.page-show--winter .section--light .action:focus,
.page-show--winter .section--light .action:active {
	background-color: var(--black);
	color: var(--white);
}

/* le déjeuner chez le lion */

.page-show--lion .section--dark {
	background-color: var(--lion-green);
	color: var(--black);
}
.page-show--lion .section--dark .action {
	background-color: var(--white);
	color: var(--black);
}
.page-show--lion .section--dark .action:hover,
.page-show--lion .section--dark .action:focus,
.page-show--lion .section--dark .action:active {
	background-color: var(--white);
	color: var(--black);
}
.page-show--lion .section--light {
	background-color: var(--white);
	color: var(--black);
}
.page-show--lion .section--light .action {
	background-color: var(--lion-green);
	color: var(--black);
}
.page-show--lion .section--light .action:hover,
.page-show--lion .section--light .action:focus,
.page-show--lion .section--light .action:active {
	background-color: var(--lion-green);
	color: var(--black);
}

/* le déjeuner chez le lion */

.page-show--giant .section--dark {
	background-color: var(--giant-purple);
	color: var(--white);
}
.page-show--giant .section--light .action {
	background-color: var(--giant-purple);
	color: var(--white);
}
.page-show--giant .section--light .action:hover,
.page-show--giant .section--light .action:focus,
.page-show--giant .section--light .action:active {
	background-color: var(--giant-purple);
	color: var(--white);
}