#sp-agenda {
	padding: 185px 0 21px 0
}
#sp-agenda > .centrage {
	position: relative;
	z-index: 1
}
#sp-agenda > .centrage2 {
	background: #e7eff9;
	border-radius: 30px;
	padding: 38px 0 52px 0;
}
.inactif {
	display: none
}
.item.evenement.inactif {
	display: block
}
#hero h1 {
	margin: 0;
	color: #fff;
	font-size: 38px;
	font-style: italic
}
#calendriers {
	width: 100%;
	min-height: 450px;
}
#choix-ecole {
	font-size: 14px
}
#cible-strasbourg {
	border-top-left-radius: 33px
}
#cible-vendenheim {
	border-top-right-radius: 33px
}
.liste {
	padding: 15px 0 0 0;
    margin: 0 -0.5%;
    position: relative;
    z-index: 0;
}
.liste h2 {
	margin: 17px 0 9px 0.5%;
	padding: 0 0 0 23px;
	color: var(--textes);
	font-weight: 400;
	background: url(../../../tpl/imgs/icones/agenda.svg) left 10px no-repeat;
	background-size: auto 16px
}
.liste a {
	color: var(--liens);
}
.item {
	float: left;
	width: 24%;
	margin: 0.5%;
	cursor: pointer;
	padding: 0;
}
.item.suite .block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item.suite .block span {
    display: block;
    font-weight: 600;
}
.item img {
	max-height: 156px
}
.liste .block {
	padding: 10px 15px 30px 15px;
	height: 376px
}
.item .dateEvenement {
	font-size: 11px;
	line-height: 114%;
	padding: 2px 0 12px 0
}
.item h3 {
	line-height: 135%;
	margin: 10px 0 11px 0
}
.item .intro {
	font-size: 11px
}





@media (max-width: 1500px) {
	#sp-agenda {
		padding: 226px 0 45px 0
	}
	#sp-agenda > .centrage2 {
		padding: 0 30px
	}
	#calendriers {
		min-height: 414px
	}
}

@media (max-width: 1200px) {
	#sp-agenda {
		padding: 180px 0 64px 0
	}
	#sp-agenda > .centrage {
		padding: 0 20px
	}
}

@media (max-width: 992px) {
	#sp-agenda > .centrage2 {
		padding: 0 5px;
		border-radius: 38px
	}
    .item {
        width: 32%;
        height: 377px;
    }
	
}

@media (max-width: 768px) {
	#sp-agenda > .centrage > .item {
		max-width: 320px;
		margin: auto
	}
	#calendriers {
		float: none;
		width: 100%
	}
	.item {
	width: 49%;
    height: 350px;
    }
	.item .block {
		height: auto;
    }
}

@media (max-width: 576px) {
	#calendriers {
		position: relative;
		z-index: 10
	}
	.item {
		width: 100%;
		max-width: 320px;
		margin: 15px auto;
		display: block;
		float: none
	;height: auto;}
}