/*
Titre idée prochain dimanche sur page d'accueil
*/
.prochain-dimanche {
	margin-top: 20px;
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.prochain-dimanche {
		margin-top: 0;
		margin-bottom: 0;
	}
}
@media (min-width: 992px) {
	.prochain-dimanche {
		margin-top: 0;
		margin-bottom: 10px;
	}
}

/*
Lien dans texte idée prochain dimanche sur page d'accueil
*/
.prochainjour-lien {
	color: #555;
}
.prochainjour-lien:hover {
	color: #333;
}

/*
Carrousel de prochains dimanches page accueil
*/
.carrousel {
	position: relative;
	height: 128px;
	margin-bottom: 30px;
}

.carrousel ul {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	gap: 20px;
	
	/* Flex pour le positionnement des li*/
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: none;
}

/* Au cas où scrollbar-width: none; ne suffit pas */
.carrousel ul::-webkit-scrollbar {
	display: none;
}

.carrousel ul li {
	/* n px : flex-basis par raport au ul */
	/* La largeur dépend de la date la plus longue : Dimanche 1er mars */
	flex: 0 0 204px;
	
	margin: 0;
	list-style-type: none;
	
	/* Flex préventif pour le positionnement du p toujours en bas */
	display: flex;
}

.carrousel ul li a {
	height: 100%;
	
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	
	padding: 15px;
	
	/* Flex pour le positionnement du p toujours en bas */
	display: flex;
	flex-direction: column;
	flex: 1 0;
}

.carrousel a h4 {
	margin-top: 0;
	margin-bottom: 5px;
	color: #555;
}

.carrousel a p:last-child {
	margin-top: auto;
	color: #555;
}

@media (hover: hover) and (pointer: fine) {
	.carrousel a:focus, .carrousel a:hover {
		border: 1px solid #bcbcbc;
		background-color: #f5f5f5;
	}

	.carrousel a:hover h4, .carrousel a:hover p:last-child {
		color: #333;
	}
}

.carrousel button {
	z-index: 1;
	height: 40px;
	width: 40px;
	
	position: absolute;
	top: 56%;
	
	background-color: #fff;
	border: none;
	cursor: pointer;
	
	font-family: 'fontello';
	font-size: 17px;
	color: #555;
}

.carrousel button:hover {
	color: #333;
}

.carrousel .carrousel-prev-item {
	left: 0;
	border-radius: 0 4px 4px 0;
	box-shadow: 3px 0 4px 0 #0003;
}
.carrousel .carrousel-next-item {
	right: 0;
	border-radius: 4px 0 0 4px;
	box-shadow: -3px 0 4px 0 #0003;
}

/* Pour cacher les boutons de navigationdu carrousel */
.cache {
	visibility: hidden;
	opacity: 0;
	transition: all 0.15s ease-in-out;
}

/*
Antienne sur page post
*/
.sosmesse-antienne {
	margin: 20px 0 20px 0;
}
.sosmesse-antienne h3 {
	font-size: 18px;
}

/*
Widget calendrier sur page post
*/
.sosmesse-widgetpost-div ul li {
	margin: 12px 0 0;
}
.sosmesse-widgetpost-div ul li ul li {
	margin: 0;
}
/* Bouton "Voir plus" */
.bouton-widget-calendrier {
	margin-top: 17px;
	text-align: center;
}

/*
Pages calendrier et antiennes
*/
.calendrier-antiennes-blocs {
	margin: 0;
	padding: 0;
}
.calendrier-antiennes-blocs li {
	list-style: none;
	margin-bottom: 60px;
}
.calendrier-antiennes-blocs h2 {
	margin-bottom: 30px;
}

.calendrier-antiennes-item-blocs {
	margin: 0;
	padding: 0;
}
@media (min-width:992px) {
	.calendrier-antiennes-item-blocs {
		margin-left: 30px;
	}
}
.calendrier-antiennes-item-blocs li {
	margin-bottom: 30px;
}
.calendrier-antiennes-item-blocs div {
	border: 0;
	border-radius: 4px;
}
/* Mise en couleur du fond selon la target # de l'URL */
/* On passe par une div dédiée car l'item li est augmenté d'une marge négative (::before) pour apparaitre plus bas que le menu */
.calendrier-antiennes-item-blocs li:target div {
	animation: highlighted-item-blocs-fade 3s;
	animation-timing-function: ease-out;
}
@keyframes highlighted-item-blocs-fade {
	0% {
		background-color: rgba(221, 221, 221, 255);
	}
	100% {
		background-color: rgba(0, 0, 0, 0);
	}
}

.calendrier-antiennes-items {
	margin: 0;
	padding: 0;
}
.calendrier-antiennes-items li {
	padding: 0;
	margin-bottom: 10px;
}
@media (min-width:992px) {
	.calendrier-antiennes-items li {
		margin-bottom: 0;
	}
}
.calendrier-antiennes-items a:not(:last-child) {
	margin-right: 10px;
}