@charset "utf-8";

/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
	margin: 0;
	font-family: arial;
	background-color: #fafafa;
}

body a {
	text-decoration: none;
}

/* HEADER */
header {
	width: 100%;
	height: 180px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: #202426;
}

.logo img {
	width: 300px;
	margin-left: 30px;
}

.home {
	background-color: transparent!important;
}

nav {
	margin-right: 30px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
}

nav ul {
	margin-right: 30px;
}

nav ul li {
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	font-family: Montserra, Arial;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}

nav ul li a {
	color: #eee;
}

nav ul li a:hover {
	color: #F00;
}

.memberbt {
	color: #ddd;
	font-size: 13px;
	height: 40px!important;
	padding-left: 15px!important;
	padding-right: 15px!important;
}

.memberbt:hover {
	background-color: #eee;
}

.memberbt:hover p {
	color: #222;
}

/* SPACES */
.space30 {
	width: 100%;
	height: 30px;
}

.space50 {
	width: 100%;
	height: 50px;
}

.space80 {
	width: 100%;
	height: 80px;
}

/* BANNER */
.banner {
	background-color: #ad1e1c;
	color: #eee;
	padding-top: 30px;
	padding-bottom: 30px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.bannerleft {
	margin-left: 150px;
	max-width: 40%;
}

.bannerright {
	margin-right: 150px;
}

.banner h2 {
	font-size: 1.8em;
	font-weight: 400;
}

.banner p {
	font-size: 1em;
	line-height: 1.5em;
}

/* BUTTON */
.appqbutton {
	height: 50px;
	border-style: solid;
	border-width: 1px;
	border-color: #9e9f9f;
	cursor: pointer;
	transition-duration: 0.25s;
	padding-left: 40px;
	padding-right: 40px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.appqbutton:hover {
	border-color: #fff;
}

.appqbutton p {
	margin-left: 10px;
	text-transform: uppercase;
	font-family: Montserra, Arial;
	font-size: 0.75em;
	letter-spacing: 1px;
}

.btimg {
	height: 12px;
	width: auto;
}

.redbt {
	background-color: #ad1e1c!important;
	color: #ddd!important;
	border-color: transparent!important;
}

.redbt:hover {
	background-color: #ddd!important;
}

.redbt:hover p {
	color: #222;
}

.rwbt p {
	color: #ddd!important;
}

.rwbt:hover {
	background-color: #ddd;
}

.rwbt:hover p {
	color: #222!important;
}

/* TITRE */
.titre {
	width: 100%;
	height: 200px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.titre h1 {
	font-family: Montserrat, Arial;
	font-size: 48px;
	font-weight: 300;
	color: #444;
	text-align: center;
	margin-top: -25px;
}

.titre .rline {
	width: 35px;
	height: 2px;
	background-color: red;
	margin-top: -20px;
}

.titre p {
	font-family: Montserrat, Arial;
	color: #777;
}



/* HOME */

.homeintro {
	width: 100%;
	height: 100vh;
	background-image: url(img/introb1.jpg);
	background-size: cover;
	top: 0;
	position: relative;
}

.intro {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	height: 70%;
}

.intro h5 {
	text-transform: uppercase;
	font-family: Montserra, Arial;
	font-size: 12px;
	font-weight: 200;
	letter-spacing: 2px;
	color: #fff;
}

.intro h2 {
	text-transform: uppercase;
	font-family: Arial;
	font-size: 38px;
	font-weight: 800;
	color: #eee;
	margin-top: -20px;
}

.intro h1 {
	text-transform: uppercase;
	font-family: arial;
	font-size: 48px;
	font-weight: 500;
	color: #eee;
	margin-top: -25px;
}

/* À PROPOS */
.apintro {
	margin: 40px 15% 40px 15%;
	color: #555;
	font-family: Montserrat, Arial;
	font-size: 18px;
	line-height: 25px;
}

.apleft {
	width: 50%;
}

.apinfo {
	width: 100%;
	display: flex;
	flexflow: row nowrap;
	justify-content: space-around;
	align-items: stretch;
}

.apleft {
	width: 50%;
	background-color: #202426;
}

.apright {
	width: 50%;
	background-image: url(img/casque.jpg);
	background-position: center;
	background-size: cover;
}

.aptxt {
	margin: 60px 50px 20px 50px;
}

.aptxt h1 {
	font-family: Montserrat, Arial;
	font-size: 40px;
	font-weight: 300;
	color: #fff;
}

.aptxt h2 {
	font-family: Montserrat, Arial;
	font-size: 28px;
	font-weight: 400;
	color: red;
}

.aptxt p {
	color: #bbb;
	line-height: 22px;
}

.team {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
}

.teamt figure {
	width: 220px;
	margin: 20px;
}

.team figure img {
	width: 220px;
	height: 241px;
}

.team figure figcaption {
	width: 220px;
	font-family: Montserrat, Arial;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	color: #222;
}

.team figure p {
	width: 220px;
	font-family: Montserrat, Arial;
	font-size: 16px;
	font-weight: 300px;
	text-align: center;
	color: #555;
	margin-top: 0px;
}

.rapq {
	width: 100%;
	background-color: #fff;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.rapq img {
	max-width: 500px;
	margin: 30px;
}

.rapqtxt {
	width: 500px;
}

.rapqtxt h1 {
	font-family: Montserrat, Arial;
	font-size: 30px;
	font-weight: 400;
	color: #555;
}

.rapqtxt .appqbutton {
	width: 180px;
}

.rapqtxt .redbt:hover p {
	color: #333;
}

/* PARTNERS */
.partners {
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	margin-top: 0px;
	margin-bottom: 50px;
}

.partners img {
	max-width: 250px;
	margin: 20px;
}

/* ARBRE DE NOEL */
.adnintro {
	width: 100%;
	margin-top: 30px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.adnintro img {
	margin-30px;
}

.adnintro h1 {
	margin: 50px;
	width: 500px;
	max-width: 90%;
	color: #333;
	font-family: Montserrat, Arial;
	font-weight: 300;
	font-size: 54px;
}

.adn {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}

.adn img {
	margin: 30px;
	max-width: 500px;
}

.adntxt {
	margin: 30px;
	width: 600px;
}

.adntxt h1 {
	color: #333;
	font-family: Montserrat, Arial;
	font-size: 48px;
	font-weight: 300;
}

.adntxt p {
	color: #777;
	line-height: 25px;
}

.adntxt .rline {
	width: 55px;
	height: 2px;
	background-color: red;
	margin-top: -20px;
}

.adntxt .redbt {
	width: 220px;
}

.adntxt .redbt p {
	color: #eee;
}

.adntxt .redbt:hover p {
	color: #222;
}

.adnthanks {
	margin: 30px;
}

.adnthanks h4 {
	font-family: Montserrat, Arial;
	font-size: 14px;
	color: #333;
}

.adnthanks p {
	font-family: Montserrat, Arrial;
	font-size: 12px;
	color: #888;
	margin-top: -10px;
}

/* CALENDRIERS */
.calyrs {
	width: 100%;
	margin-top: -50px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.calbt {
	width: 70px;
	height: 35px;
	margin: 15px;
	background-color: #333;
	color: #fff;
	font-family: Montserrat, Arial;
	font-size: 18px;
	font-weight: 200;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	border: none;
}

.calbt:hover {
	background-color: red;
	cursor: pointer;
}

.calinfo {
	width: 100%;
	display: none;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.calinfo h2 {
	font-family: Montserrat, Arial;
	font-size: 34px;
	font-weight: 400;
	color: #333;
	margin-top: 50px;
}

.calinfo a {
	color: red;
	font-family: Montserra, Arial;
	font-size: 18px;
	font-weight: 500;
	margin-top: -15px;
}

.calinfo img {
	width: 85%;
	max-width: 1000px;
	height: auto;
	margin-top: 30px;
}



#cal2025 {
	display: flex;
}

#cal2026 {
	display: none;
}

/* CONTACT */
.contact {
	width: 90%;
	max-width: 1000px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
	margin-left: auto;
	margin-right: auto;
}

.contactitem {
	text-align: center;
	width: 250px;
}

.contactitem img {
	height: 57px;
}

.contactitem a p{
	font-family: Montserrat, Arial;
	font-size: 14px;
	color: #333;
	text-align: center;
}

/* FOOTER */
footer {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 70px;
	background-color: #202426;
	color: #9e9f9f;
	font-size: 14px;
}

.footerleft {
	margin-left: 30px;
	line-height: 22px;
}

.footerright {
	margin-right: 30px;
}

.footerright a {
	color: #fff;
}

/* RESPONSIVE */
@media (max-width: 800px) {
	.logo img {
		width: 200px;
	}
	nav {
		display: none;
	}
	.intro {
		margin-left: 20px;
		margin-right: 20px;
	}
	.banner {
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	.bannerleft {
		margin: 20px;
		max-width: 90%;
	}
	.bannerright {
		margin: 20px;
	}
	.titre h1 {
		font-size: 32px;
	}
	.partners {
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding: 0;
		margin: 0;
	}
	.apleft {
		width: 100%;
	}
	.apright {
		display: none;
	}
	.rapq {
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}
	.rapq img {
		width: 90%;
	}
	.rapqtxt {
		width: 90%;
	}
	.adnintro {
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}
	.adnintro img {
		width: 90%;
	}
	.adnintro h1 {
		font-size: 34px;
	}
	.adn {
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}
	.adn img {
		width: 90%;
	}
	.adntxt {
		width: 90%;
	}
	.adntxt h1 {
		font-size: 28px;
	}
	.contact {
		flex-flow: column nowrap;
		align-items: center;
	}
	.contactitem {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

/* SECTION BOUTTON */
.mmenubt {
	position: absolute;
	z-index: 5;
	top: 20px;
	right: 20px;
	width: 45px;
	height: 28px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	margin: 20px;
}

.mmenubt #mmcenter1, #mmcenter2 {
	position: absolute;
	width: 40px;
	height: 3px;
	background-color: #ccc;
	border-radius: 2px;
	transition: ease 0.5s;
}

.mmcenter1 {
	position: absolute;
	width: 40px;
	height: 3px;
	background-color: #ccc;
	border-radius: 2px;
	transform: rotate(45deg);
	transition: ease 0.5s;
}

.mmcenter2 {
	position: absolute;
	width: 40px;
	height: 3px;
	background-color: #ccc;
	border-radius: 2px;
	transform: rotate(-45deg);
	transition: ease 0.5s;
}

.mmenubt #mmtop {
	position: relative;
	width: 40px;
	height: 3px;
	background-color: #ccc;
	border-radius: 2px;
	margin-bottom: auto;
	transition: ease 0.5s;
}

.mmtop {
	position: relative;
	width: 40px;
	height: 3px;
	background-color: #ccc;
	border-radius: 2px;
	margin-bottom: auto;
	opacity: 0;
	transition: ease 0.25s;
}

.mmenubt #mmbottom {
	position: relative;
	width: 40px;
	height: 3px;
	background-color: #ccc;
	border-radius: 2px;
	margin-top: auto;
	transition: ease 0.5s;
}

.mmbottom {
	position: relative;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background-color: #ccc;
	margin-top: auto;
	opacity: 0;
	transition: ease 0.25s;
}

#mobilemenubutton {
	width: 45px;
	height: 45px;
	position: absolute;
	z-index: 3;
	opacity: 0.5;
}



/* SECTION TEXTE */
#mmenutxt {
	overflow: hidden;
	padding-top: 50px;
}

#mmenutxt p {
	font-size: 1.2em;
	font-weight: 400;
	text-transform: uppercase;
	margin-left: 20px;
}

#mmenutxt p a {
	font-size: 1.2em;
	font-weight: 400;
	color: #fff;
}

.mmenutxt0 {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 0px;
	height: 0px;
	background-color: rgba(0, 0, 0, 0.9);
	transition: ease-out 0.25s;
}

.mmenutxt1 {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 100%;
	height: 100vh;
	transition: ease-out 0.25s;
}

@media (min-width:801px) {
	.mmenubt {
		display: none;
	}
}