.burger {
	display: none;
	position: absolute;
    top: 20px;
    left: 20px;		
	width: 70px;
	height: 70px;	
	z-index: 20;
	background-color: transparent;
	border: none;

	outline: none;
	}

.burger-line {
	display: block;
	width: 50px;
	height: 6px;
	background-color: white;
	margin-bottom: 12px;
	transition: all 0.3s;
	transform-origin: 0% 50%;
}



.burger.active .burger-line:nth-child(1) {
	transform-origin: 0% 50%;
	transform: rotate(45deg);
}

.burger.active .burger-line:nth-child(2) {
	opacity: 0;
}

.burger.active .burger-line:nth-child(3) {
	transform-origin: 0% 50%;
	transform: rotate(-45deg);
}





/* Format smartphone */
@media screen and (max-width: 767px) {

	/** {
		outline: 1px dotted green;
	}*/

	/* DESACTIVATION DE L'AFFICHAGE LIE AU CALENDRIER CALENDRIER */

	.add-calendar {
		display: none;
	}



	.burger {
		display: block;		
		width: 70px;
		height: 70px;	
		z-index: 40;

		background-color: transparent;
		border: none;

		outline: none;

	}

	.burger-line {
		display: block;
		width: 50px;
		height: 6px;
		background-color: white;
		margin-bottom: 12px;
		transition: all 0.3s;
		transform-origin: 0% 50%;
	}

	button.slick-arrow::before {
		display: none;
	}

	.site-header-wrapper{
		width: 100%;
	}

		.site-header-logo {
			width: 100rem;
			margin: auto;
		}

	.nav {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;


        width: 90%;
        height: 100vh;
        background-color: #941604;
        
        opacity: 0;
        transition: 1s;
        transform: translateX(-100%);  

        flex-direction: column-reverse;
        justify-content: center;
        align-items: flex-start;
	}

	.nav.active {
		opacity: 1;
		transform: translateX(0%);
	}

		.nav-picto-content {
			width: 300rem;
			flex-direction: row-reverse;
			justify-content: space-between;
			margin-left: 30rem;
		}

			.nav-picto {
				width: 50rem;
				margin-left: 0;
			}

			button.nav-picto {
				width: 70rem;
			}

			

		.nav-item-content {
			display: flex;
		    flex-direction: column;
		    justify-content: space-around;
		    width: 300rem;
		    justify-content: flex-end;
		    margin-left: 30rem;
		}

			.nav-item {
				font-size: 20rem;
				text-transform: uppercase;
				margin-top: 60rem;
			}

			.nav-item:nth-child(1) {
				display: flex;
			}

	.site-main {
		min-height: 450rem;
	}

	.site-main-wrapper {
		width: 100%;
		min-height: 450rem;
	}

	.site-kind {
		font-size: 14rem;
		margin-bottom: 5rem;
	}

	.site-title {
		font-size: 40rem;
		margin-bottom: 30rem;
	}

		.site-main-dates {
			width: 40%;
			height: 70rem;
			left: 30%;
		}

			.date-day {
				font-size: 22rem;
			}

			.date-month {
				font-size: 14rem;
			}

.site-slider {
	min-height: 480rem;
}

	.site-slider-wrapper {
   		width: 90%;
   		height: 480rem;
   		overflow: hidden;
	}

		.site-subtitle {
			font-size: 24rem;
		}

		.site-slider-contents {
			width: 100%;
			display: block;
		}

	.site-subscription-wrapper {
		width: 90%;
	}

	.site-about-wrapper {
		width: 100%;
	}

		.site-about-wrapper {
			display: block;
		}

			.site-about-picture {
				width: 90%;
				margin: auto;
				min-height: 0;
				margin-bottom: 10rem;
			}

			.site-about-text {
				width: 90%;
				height: 200rem;
				margin: auto;
			}

			.site-info {
				font-size: 14rem;
			}

		.site-slider-actus-picture {
			width: 250rem;
			height: auto;
		}


	.site-footer-wrapper {
		width: 100%;
	}

	.footeritem {
		display: block;
	}

	.site-footer-wrapper-top {
		width: 80%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-top: 30rem;
	}

	.site-newsletter-form {
		margin: auto;
		justify-content: space-between;
		min-height: 150rem;
	}

		.site-newsletter-form-label {
			font-size: 24rem;	 
		}

	.footeritem {
		display: block;
   		margin: 30rem 0;
   		width: 100%;
	}	

	.footeritem-list {
		display: block;
		margin: auto;
	}


	.site-footer-wrapper-bottom {
		width: 100%;
	}

	.site-footer-wrapper-bottom .footeritem-list {
		display: flex;
		flex-direction: column;
} 

	.site-footer-wrapper-bottom .footeritem-list a {
			margin: 25rem;
	} 


	/* Boutons et hover */

	.btn-white, .btn-red {
		font-size: 14rem;
		padding: 10rem 25rem;
	}

	.nav-item:hover {
		color: white;
	}

	a.nav-picto:hover {
		filter: none;
	}