#page {background:url('../img/affiche.jpg') top 300px center / contain no-repeat;}
@keyframes apparition {from {opacity:0;} to {opacity:100%;}}


/* Liste des spectacles */

@keyframes list-item-odd {
	from {left:800px;}
	to {left:0px;}
}
@keyframes list-item-even {
	from {left:-800px;}
	to {left:0px;}
}
.list-item {margin:10px 0px 20px 0px; padding:10px; position:relative;}
.list-item:nth-child(odd) {background:lavender;}
.list-item:nth-child(even)  {}
.list-flex {display:flex; gap:10px;}
.list-theme {writing-mode:sideways-lr; flex:0 0 20px; padding:5px; background:url('../img/bkg-theme-blue.png') center / 100% 100% no-repeat; text-transform:uppercase; font-weight:bold; letter-spacing:0.5ex; color:white; text-align:center;}
.list-image {flex:0 0 250px; text-align:right;}
.list-image img {width:100%;}
.list-credit {font-size:0.8rem; position:relative; top:-5px; color:gray;}
.list-title {flex:auto;}
.list-title h2 {margin:0px 0px 5px 0px; padding:0px;}
.list-dates {}
.list-troupe {zmargin-bottom:20px;}
.list-place {color:darkblue; font-size:1.2rem; padding-top:5px; margin-bottom:20px;}
.list-place img {height:1rem;}
.list-resa {flex:0 0 max-content; margin-top:10px;}
.list-ticket {text-align:center; font-size:1.2rem; background:url('../img/bkg-ticket.png') center / 100% 100% no-repeat; padding:10px 30px; color:white; margin-bottom:20px; width:max-content; border-radius:20px; cursor:pointer;}
.list-ticket a {color:white; text-decoration:none;}
.list-duration {}
.list-age {}
.list-short {}
.list-text {margin:10px 0px 0px 40px;}
.list-plus {padding-left:10px; color:gray;}


/* Fiche des spectacles */

.fiche-h1 {text-align:left;}
.fiche-troupe {font-size:2rem; margin-bottom:20px; color:darkBlue;}
.fiche-image {margin-bottom:20px; text-align:right;}
.fiche-image img {width:100%;}
.fiche-flex {display:flex;}
.fiche-title {flex:auto;}
.fiche-dates {font-size:1.5rem;}
.fiche-place {font-size:1.5rem; color:darkBlue;}
.fiche-place img {height:1.5rem;}
.fiche-ticket {text-align:center; font-size:1.2rem; background:url('../img/bkg-ticket.png') center / 100% 100% no-repeat; padding:10px 20px; color:white; width:max-content; border-radius:20px; cursor:pointer;}
.fiche-ticket a {color:white; text-decoration:none;}

.abstract {display:grid; grid-template-columns:1fr 1fr; background:blue; color:white; margin:30px 0px 20px 0px; padding:5px 10px;}
.abstract-left {text-align:left;}
.abstract-right {text-align:right;}


@media(width <= 600px) {
	.list-flex {flex-wrap:wrap;}
	.list-ticket {font-size:1rem;}
	.list-text {margin:10px 0px;}
}