* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
	margin: 0;
	padding: 0;
	height: 118px;
	width: 100%;
	display: block;
/*	background: #ffffff;

	box-shadow: 0px 3px 26px 0px rgba(0,0,0,0.03);
-webkit-box-shadow: 0px 3px 26px 0px rgba(0,0,0,0.03);
-moz-box-shadow: 0px 3px 26px 0px rgba(0,0,0,0.03);*/
	margin-bottom: 34px;
	margin-top: 24px;
}


header .container {
	max-width: 880px;
	width : 880px;
	margin-left: auto;
	margin-right: auto;
	position: relative;	
	display: flex;
	justify-content: space-between;
	align-items: center;
}


header .container > div > a {
	width: 125px;
	border-radius: 200px;
	height: 125px;
	background: url('img/logo_impro_romandie.png');
	background-repeat: no-repeat;
	top: 0px;
	position: relative;
	background-size: contain;
	display: block; 
	position: absolute;   
	left: 10px; 
	border: 1	px solid #F0F0F0;
	box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.02);
-webkit-box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.02);
-moz-box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.02);
}

header .container h1 {
	text-indent: -100000px;
	font-size: 1px;
	overflow: hidden;
	background: url('img/impro_romandie_text.png');
	width: 256px;
	height: 32px;
	margin: 0;
	margin-top: 36px;
	background-size: contain;
	background-repeat: no-repeat;
}

header .container > div {
	height:  118px;
	margin-left: 24px;
	padding-left: 136px;
}

header .container > div p {
	margin: 0;
	color: #4C4C4C;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;
	margin-top: 4px;
}

header .container .menu {
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding-right: 24px;
	margin-right: 38px;
	margin-top: 20px;
	position: relative;
}

header .container .menu::after {
	content : '';
	position: absolute;
	background: url('img/burger.png');
	width: 14px;
	height: 11px;
	position: absolute;
	right: 0px;
	top: 2px;
	background-size: contain;
	background-repeat: no-repeat;
}


body {
	margin: 0;
	padding: 0;
	background: #f5f5f5;
}

main {
	max-width: 880px;
	width : 880px;
	margin-left: auto;
	margin-right: auto;
}


main article {
	border: 4px solid #F0F0F0;
	border-bottom: 12px solid #F0F0F0;
	border-radius: 34px;
	margin-top: 30px;
	margin-bottom: 26px;
	color: #1A1A1A;
	background: #ffffff;
}

article h2 {
	max-height: 176px;
  overflow: hidden;
	font-size: 42px;
	line-height: 44px;
	margin-top: 30px;
	margin-bottom: 22px;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	font-weight: 900;
}

article .img_pestacle {
	width: 374px;
	min-height: 334px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
}

article .img_pestacle img {
	position: absolute;
	width: 100%;            
	height: 100%;           
	object-fit: cover;      
	object-position: center;

}

article .container {
	display: flex;
	justify-items: stretch;
	margin : 36px;
	margin-left: 50px;
	justify-content: space-between;
}

article .infos {
	width:  358px;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 600;
}


article .mobile {
	display: none!important
}

article .infos .description {
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0.002em;
}

article .date {
	margin-left: -14px;
	display: flex;
	width: 130%;
}


article .date > span {
	background:  #F2F2F2;
	border-radius: 100px;
	padding: 14px 30px;
	font-size: 14px;
	font-weight: 700;
	margin-right: 14px;
   letter-spacing: 0.012em;
}

article .date > span span {
	padding-left: 6px;
	padding-right: 6px;
}

article .festival {
	margin-top: 24px;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	background: none;
	border-radius: 100px;
	letter-spacing: 0.012em;
}

article .festival a {
	margin-left: 6px;
	color:  #000000;
}

article .organisation {
	font-size: 14px;
	font-weight: 700;
	margin-top: 0;
	bottom: 0;
	display: block!important;
	font-family: "Montserrat", sans-serif;
	margin-top: 0;
	margin-bottom: 0;
	opacity: 0.72;
}

article .organisation a {
	color:  #000000;
}


.tags {
	padding: 0;
	margin-left: 35px;
	margin-right: 35px;
	margin-top: 16px;
	margin-bottom: 16px;
	width: calc(100% - 70px);
	display: flex;
	list-style: none;
	align-items: stretch;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	color: #1a1a1ae6;
}

.tags li {
	padding: 14px 30px;
	margin: 0 7px;
	background: #D2E7FD;
	border-radius: 100px;
	font-size: 14px;
	letter-spacing: 0.012em;
}

.tags a {
	color: #1a1a1ae6;
}

.tags .tampon {
	flex: 1 1 auto;
	background: #eeeeee80;
}

.tags li.rouge {
	background: #FFBABA;
}

.tags li.jaune {
	background: #F3EBAA;
}

.tags li.violet {
	background: #E9CCF7;
}

article .link {
	padding: 0;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 34px;
	margin-bottom: 44px;
	width: calc(100% - 100px);
	display: flex;
	justify-content: space-between;
}

article .link  a {
	color: #1A1A1A;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-size: 14px;
}

article .link  a.externe {
	opacity: 0.7;
}




@media only screen and (max-width: 660px) {

	body {
		background: #FAFAFA	;
	}

	header {
		width: 100%;
		overflow: inherit;
		margin-bottom: 52px;
		background: #ffffff;
		margin-top: 0;
		height: 98px;
	}

	header .container {
		margin-top: 0px;
		width: 100%;
		height: 98px;
		position: initial;
		box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.02);
		-webkit-box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.02);
		-moz-box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.02);
	}


	header .container > div > a {
		width: 132px;
		height: 132px;
		position: absolute;
		left: 50vw;
		transform: translateX(-50%);
	}

	header .container > div > h1 {
		display: none;
	}

	header .container > div > p {
		text-align: center;
		display: none;
		position: absolute;
    top: 90px;
    width: 80vw;
    left: 10vw;
    margin-top: 4px;
	}

	header .menu {
		text-indent: -100000px;
		font-size: 1px;
		overflow: hidden;
	}

	main {
		width: 92%;
		max-width: 92%;
	}

	main .container {
		display: block;
	}

	main article {
		overflow: hidden;
		border-radius: 20px 20px 30px 30px;
		border-color: #e3e3e3;
		background: #ffffff;
		margin-top: 28px;
	}

	article .description {
		display: none;
	}

	article .description.mobile {
		display: block!important;
		width: 92%;
		font-size: 14px;
		line-height: 19px;
		margin-bottom: 2px;
	}

	article .description p:last-child {
		margin-bottom: 0px;
	}


	article .festival, article .organisation {
		margin-left: 6px;
	}

	article .date, article .tags {
		display: none!important;
	}

	main article .date {
		display: flex!important;
		font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
	}

	main article .mobile.tags {
		display: block!important;
		margin: 10px 0;
		width: calc(100% + 32px);
		height: 42px;
		margin-bottom: 24px;
		margin-left: -16px;
	}

	main article {
		border: 3px solid #EEEEEE;
		border-bottom: 8px solid #EEEEEE;
	}


	main article .tags li {
		width: auto;
		white-space:nowrap;
		font-size: 12px;
		background: none!important;
		padding: 0;
		margin: 0;
	} 

		main article .tags li span {
			display: block;
			padding: 14px 24px;
			margin-left: 5px;
			margin-right: 5px;
			background: #D2E7FD;
			border-radius: 100px;
		}

		main article .tags li.rouge span {
			background: #FFBABA;
		}

		main article .tags li.jaune span {
			background: #F3EBAA;
		}

		main article .tags li.violet span {
			background: #E9CCF7;
		}

		


		main article .tags li:first-child span {
			margin-left: 16px;
		}

		main article .tags li:last-child span {
			margin-right: 16px;
		}

	main article .img_pestacle {
		display: none;
		border-radius: 14px 14px 0 0;
	}

	main article .img_pestacle.mobile {
		width: calc(100%);
		position: relative;
		border-radius: 16px;
		padding-top: 86%;
		min-height: initial;
		display: block!important;
	}

	main article .img_pestacle.mobile img{
		top: 0;
	}

	article .container {
		margin: 18px 16px;
	}

	article .infos {
		width: 100%;
		box-sizing: border-box;
	}

	article h2 {
		max-width: 98%;
		font-size: 22px;
		line-height: 26px;
		letter-spacing: 0.01em;
		font-weight: 900;
		margin-top: 22px;
		margin-bottom: 22px;
		margin-left: 6px;
	}

	article .date {
		margin: 12px 0 14px 0;
		width:  100%;
		overflow: hidden;
		box-sizing: border-box;
		background: #F3EBAA;
		border-radius: 14px;
		justify-content: space-between;
	}

	article .date span {
		padding: 20px 22px;
		margin: 0;
		font-weight: 700;
		background: none;
		font-size: 13px;
	}

	article .infos .organisation {
		display: none;
	}

	article .date.mobile.today, article .date.mobile.tomorrow {
		font-size: 14px;
	}

	article .date span:nth-child(1){
		font-weight: 800;
	} 

	article .date:not(.mobile){
		display: none!important;
	}

	article .description {
		margin-left: 6px;
	}

	article .link {
		width: auto;
		display: flex;
		align-items: baseline;
		box-sizing: border-box;
		margin: 26px 22px;
		margin-right: 24px;
		margin-top: 8px;
	}

	article .link a {
		font-size: 13px;
	}

	article .link a:nth-child(2){
		display: none;
	}

	article .link .organisation { 
		display: block!important;
		font-family: "Montserrat", sans-serif;
		margin-top: 0;
		margin-bottom: 0;
		font-size: 13px;
		opacity: 0.72;
	}

	article .link .organisation.mobile a {
		font-size: 13px;
	}

}