﻿
/*#region Accueil*/

	#evenements.accueil {
		max-width:1044px;
		margin:60px auto 30px auto;
	}

		/*Titre dans la page d'accueil*/
		#evenements.accueil > .titre,
		#evenements.accueil > h2.titre,
		#total #evenements.accueil > h2.titre {
			font-size:2.25rem; font-weight:600; color:#5e9868;
			padding:0px 0px 35px 0px;
			text-align:center;
			text-transform:uppercase;
			line-height:inherit;
		}

		/*La liste*/
		#evenements.accueil .liste { font-size:0; }

		#evenements.accueil .liste .slick-slide { text-align:center; }

			/*Un événement*/
			#evenements.accueil .liste .evenement {
				position:relative; display:block;
				background-color:#e4e9e5;
				width:310px; /*height:449px;*/ height:429px;
				margin:0px auto;
			}

				#evenements.accueil .liste .evenement > div { display:block; }

					#evenements.accueil .liste .evenement > div > div {  }

					#evenements.accueil .liste .evenement .vignette {
						position:relative;
						width:310px; height:190px;
						background:no-repeat center center;
						background-size:contain;
						background-color:white;
					}
						#evenements.accueil .liste .evenement .vignette::after {
							position:absolute; display:block; content:"";
							width:100%; height:100%;
							border:solid 1px #98ab9b;
						}


					#evenements.accueil .liste .evenement .date {
						display:table;
						width:calc(100% - 30px); height:51px;
						margin:0px 15px;
					}
						#evenements.accueil .liste .evenement .date > * {
							display:table-cell;
							font-size:1.5rem; font-weight:400; color:#0a7420;
							text-transform:capitalize;
							text-align:left; vertical-align:bottom;
							padding:0px;
							border-bottom:solid 1px #5e9868;
						}

					#evenements.accueil .liste .evenement .titre,
					#evenements.accueil .liste .evenement h3.titre,
					#total #evenements.accueil .liste .evenement h3.titre {
						display:table;
						height:80px;
						line-height:inherit;
					}
						#evenements.accueil .liste .evenement .titre > *,
						#evenements.accueil .liste .evenement h3.titre > *,
						#total #evenements.accueil .liste .evenement h3.titre > * {
							display:table-cell;
							font-size:1.5rem; font-weight:400; color:#0a7420;
							text-align:left; vertical-align:middle;
							padding:0px 15px;
							overflow:hidden;
							line-height:inherit;
						}

					#evenements.accueil .liste .evenement .breve > * {
						height:67px;
					}
						#evenements.accueil .liste .evenement .breve > * {
							display:block;
							font-size:1.125rem; font-weight:400; color:black; line-height:120%;
							text-align:left;
							padding:0px 15px;
							overflow:hidden;
						}

					#evenements.accueil .liste .evenement .ensavoirplus {
						position:absolute; display:inline-block;
						font-size:0; 
						bottom:15px; right:15px;
						background-color:white;
						border-radius:50%;
						transition:all 0.25s;
					}
						#evenements.accueil .liste .evenement .ensavoirplus a:hover { text-decoration:none; }
							#evenements.accueil .liste .evenement .ensavoirplus a::after { 
								content:"\f138";
								font-family:"Font Awesome 5 Free"; font-size:32px; font-weight:900; color:#5e9868;
								line-height:100%;
								transition:all 0.25s;
							}

					#evenements.accueil .liste .evenement .ensavoirplus:hover { background-color:#5e9868; }
						#evenements.accueil .liste .evenement .ensavoirplus:hover a { text-decoration:none; }
							#evenements.accueil .liste .evenement .ensavoirplus:hover a::after { color:white; }



	#evenements .slick-dots { bottom:-40px; }

		#evenements .slick-dots li button::before {
		  display:block; content:"";
		  font-size:0px;
		  top:0; left:0;
		  width:13px; height:13px;
		  border-radius:50%;
		  background-color:#c4c0c0;
		  border:solid 1px #333232;
		  opacity:1;
		}
		#evenements .slick-dots li.slick-active button::before { background-color:white; }

/*#endregion Accueil*/

/*#region Page*/

	#evenements.page {
		max-width:900px; 
		margin:40px auto 30px auto;
	}

		/*La liste*/
		#evenements.page .liste {
			text-align:left;
		}

			/*Un énévement*/
			#evenements.page .liste .evenement {
				display:inline-block;
				margin:15px auto; padding:15px;
				text-align:left;
				background-color:#e4e9e5;
				width:100%;
			}

				#evenements.page .liste .evenement > div { display:block; text-align:left; }

					#evenements.page .liste .evenement .entete { display:table; border-bottom:solid 1px #0a7420; width:100%; }

						#evenements.page .liste .evenement .entete > div,
						#evenements.page .liste .evenement .entete > h3 { display:table-cell; vertical-align:bottom; }

						#evenements.page .liste .evenement .date {
							font-size:1.125rem; font-weight:400; color:black;
							text-transform:capitalize;
							padding:0px 20px 2px 0px;
							background-color:#e4e9e5;
							width:10px;
							white-space:nowrap;
						}

						#evenements.page .liste .evenement .titre,
						#evenements.page .liste .evenement h3.titre,
						#total #evenements.page .liste .evenement .titre {
							font-size:1.5rem; font-weight:400; color:#0a7420;
							padding:0px 0px 0px 0px;
							line-height:inherit;
						}

						#evenements.page .liste .evenement .corps { display:table; margin-top:25px; }

							#evenements.page .liste .evenement .corps > div { display:table-cell; vertical-align:top; }

							#evenements.page .liste .evenement .corps .vignette {
								position:relative; display:inline-block;
								width:310px; height:190px;
								background:white no-repeat center center; background-size:contain;
							}
								#evenements.page .liste .evenement .corps .vignette::after {
									position:absolute; display:block; content:"";
									width:100%; height:100%;
									border:solid 1px #98ab9b;
								}

							#evenements.page .liste .evenement .corps .contenu {
								font-size:1.125rem; font-weight:400; color:black; line-height:120%;
								padding:0px 15px 15px;
							}

			/*Séparation entre les événements*/
			#evenements.page .liste .separation { display:block; height:0px; }

/*#endregion Page*/


/*#region Classes disponibles en édition*/

	#evenements.page .liste .evenement a { text-decoration:none; }
	#evenements.page .liste .evenement a:hover { text-decoration:underline; }

	#evenements.page .liste .evenement a.lienVert { color:#5e9868; }
	#evenements.page .liste .evenement a.lienOrange { color:#b03f25; }
		
/*#endregion Classes disponibles en édition*/


/*#region RESPONSIVE*/

@media all and (max-width:768px) {

					#evenements.page .liste .evenement .entete { display:block; width:auto; }

						#evenements.page .liste .evenement .entete > div,
						#evenements.page .liste .evenement .entete > h3 { display:block; padding:0; margin: 0 0 2px 0; }

						#evenements.page .liste .evenement .date { padding:0; width:auto; white-space:normal; }

						#evenements.page .liste .evenement .titre,
						#evenements.page .liste .evenement h3.titre,
						#total #evenements.page .liste .evenement .titre { padding:0; }

						#evenements.page .liste .evenement .corps { margin-top:15px; }

							#evenements.page .liste .evenement .corps .vignette { width:155px; height:95px; }

}

@media all and (max-width:640px) {

						#evenements.page .liste .evenement .corps { display:block; }

							#evenements.page .liste .evenement .corps > div { display:block; }

							#evenements.page .liste .evenement .corps .vignette {
								display:block; margin:0 auto; padding:0; width:220px; height:135px;
							}

							#evenements.page .liste .evenement .corps .contenu {
								margin:15px 0 0 0; padding:0;
							}

}

@media all and (max-width:360px) {

	#evenements.accueil { max-width:280px; }

			#evenements.accueil .liste .evenement { width:280px; }

					#evenements.accueil .liste .evenement .vignette { width:280px; height:172px; }

}

/*#endregion RESPONSIVE*/
