/* VARIABLES */

:root {
	--blue1: #389bdd;
	--blue2: #3c65ad;
	--blue3: #0d2c63;
	--green1: #66ad3c;
	--green2: #2e630d;
	--green3: #0f4100;
	--blue_horizontal_gradient: linear-gradient(90deg, var(--blue3) 0%, var(--blue1) 100%);
	--green_horizontal_gradient: linear-gradient(90deg, var(--green3) 0%, var(--green1) 100%);
	--lightgrey: rgb(220, 220, 220);
	--vh: 100vh;
	--hundred_vh: calc(var(--vh, 1vh) * 100);
}

/* FONTS */

@font-face {
	font-family: "SourceSans3SemiBold";
	src: url("fonts/SourceSans3SemiBold.eot");
	src: url("fonts/SourceSans3SemiBold.eot") format("embedded-opentype"), url("fonts/SourceSans3SemiBold.woff2") format("woff2"), url("fonts/SourceSans3SemiBold.woff") format("woff"),
		url("fonts/SourceSans3SemiBold.ttf") format("truetype"), url("fonts/SourceSans3SemiBold.svg#SourceSans3SemiBold") format("svg");
}

@font-face {
	font-family: "SourceSans3Light";
	src: url("fonts/SourceSans3Light.eot");
	src: url("fonts/SourceSans3Light.eot") format("embedded-opentype"), url("fonts/SourceSans3Light.woff2") format("woff2"), url("fonts/SourceSans3Light.woff") format("woff"),
		url("fonts/SourceSans3Light.ttf") format("truetype"), url("fonts/SourceSans3Light.svg#SourceSans3Light") format("svg");
}

@font-face {
	font-family: "SourceSans3Regular";
	src: url("fonts/SourceSans3Regular.eot");
	src: url("fonts/SourceSans3Regular.eot") format("embedded-opentype"), url("fonts/SourceSans3Regular.woff2") format("woff2"), url("fonts/SourceSans3Regular.woff") format("woff"),
		url("fonts/SourceSans3Regular.ttf") format("truetype"), url("fonts/SourceSans3Regular.svg#SourceSans3Regular") format("svg");
}

/* GENERAL */

html {
	display: flex;
	justify-content: center;
	scroll-behavior: smooth;
	background-color: white;
	font-family: "SourceSans3Regular", sans-serif;
	font-size: 16px;
	line-height: normal;
	color: var(--blue3);
}

/* @media screen and (max-width: 650px) {
	html {
		font-size: 14px;
	}
} */

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	min-height: 100vh;
	max-width: min(100vw, 1920px);
	overflow-x: hidden;
	background-color: white;
}

h1,
h2 {
	font-family: "SourceSans3SemiBold", sans-serif;
}

h3 {
	font-family: "SourceSans3Regular", sans-serif;
}

h4 {
	font-family: "SourceSans3Light", sans-serif;
}

.button_blue {
	padding: 15px;
	color: white;
	background-color: var(--blue1);
	text-transform: uppercase;
	border: none;
	border-radius: 5px;
	box-shadow: var(--green2) -10px 10px;
	width: 180px;
	cursor: pointer;
	transition: 0.2s;
	font-size: 1rem;
}

@media (hover: hover) {
	.button_blue:hover {
		background-color: var(--green1);
		box-shadow: var(--blue3) -10px 10px;
	}
}

.link {
	color: var(--blue1);
	text-decoration: underline;
}

@media (hover: hover) {
	.link:hover {
		color: var(--green1);
	}
}

/* HEADER */

header {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	padding: 0 30px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.7973390039609594) 100%);
}

header nav {
	display: flex;
	align-items: center;
}

header nav ul {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	color: var(--blue1);
	font-size: 1.4rem;
	height: 90px;
	align-self: flex-start;
}

header nav ul li {
	height: 40px;
	padding: 20px 20px 20px 0px;
	display: flex;
	align-items: center;
}

header nav a:hover {
	color: var(--blue2);
}

#nav_login_icon {
	fill: var(--blue1);
	height: 22px;
}

#nav_wind_icon {
	display: none;
}

@media (hover: hover) {
	#nav_login_icon:hover {
		fill: var(--blue2);
	}
}

#nav_open_mobile_icon,
#nav_close_mobile_icon {
	display: none;
}

.current_page {
	background-image: url("../images/icon_header_current_page.svg");
	background-repeat: no-repeat;
	background-size: 40px;
	background-position: top 0 right 0;
	color: var(--blue2);
}

#wind_indicator {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 15px;
}

.wind_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#wind_indicator svg {
	width: 60px;
	height: 60px;
}

#nav_bus_widget {
	display: none;
}

main {
	width: 100%;
	padding: 30px;
	min-height: calc(100vh - 60px);
}

@media screen and (max-width: 480px) {
	main {
		padding: 30px 15px;
		padding-top: 60px;
	}
}

@media screen and (max-width: 1023px) {
	#nav_open_mobile_icon {
		position: fixed;
		top: 20px;
		right: 20px;
		display: flex;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 1;
	}

	#nav_close_mobile_icon {
		position: fixed;
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 1;
	}

	#nav_wind_icon {
		position: fixed;
		top: 80px;
		right: 20px;
		width: 40px;
		height: 40px;
		display: flex;
		cursor: pointer;
		z-index: 1;
	}

	header {
		position: relative;
		display: none;
		flex-direction: column;
		height: max-content;
		min-height: var(--hundred_vh);
		background-color: white;
		padding-top: 140px;
		background-image: url("../images/landing_content_background.svg");
		background-repeat: no-repeat;
		background-size: 150px;
		background-position: top 30px left 30px;
	}

	nav {
		flex-direction: column;
	}

	header nav ul {
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		height: 100%;
	}

	#wind_indicator {
		display: none;
		flex-direction: column;
		align-items: flex-end;
		gap: 25px;
		width: 100%;
	}

	#nav_bus_widget {
		display: flex;
		width: 100%;
		margin-top: 20px;
	}
}

/* FOOTER */

footer {
	display: flex;
	flex-direction: column;
	width: 100%;
}

footer section:first-of-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	background: linear-gradient(90deg, var(--blue3) 0%, var(--blue1) 100%);
	width: 100%;
	min-height: 200px;
	padding: 30px;
}

footer section:first-of-type div:nth-child(1) {
	display: flex;
	align-items: center;
	gap: 30px;
	height: 100%;
}

footer section:first-of-type div:nth-child(1) svg {
	width: 100px;
	height: 100px;
}
footer section:first-of-type div:nth-child(1) address {
	width: max-content;
	text-align: center;
	color: white;
}

footer section:first-of-type div:nth-child(2) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 30px;
	height: 100%;
}

footer section:first-of-type div:nth-child(2) * {
	max-width: 300px;
	height: 100px;
	border: thin solid white;
	border-radius: 5px;
	cursor: pointer;
}

footer section:nth-of-type(2) {
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background-color: var(--blue3);
	text-decoration: underline;
	padding: 15px 30px;
}

@media screen and (max-width: 680px) {
	footer section:first-of-type {
		flex-direction: column;
	}
}

/* GENERIC CONTAINERS LAYOUTS */

.container_layout_1 {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	background-color: white;
	box-shadow: var(--blue3) -10px 10px;
	border-radius: 5px;
}

.container_layout_1 .container_layout_1_cover_image {
	height: 300px;
	width: 100%;
	background-image: url("../images/club_landing.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.container_layout_1 h2 {
	color: var(--blue);
	margin-bottom: 15px;
}

.container_layout_1 .container_layout_1_content {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-around;
	text-align: justify;
	width: 100%;
	gap: 30px;
	padding: 30px;
}

.container_layout_1 .container_layout_1_content > div {
	flex: 1;
	max-width: 400px;
	min-width: 250px;
}

.container_layout_2 {
	display: flex;
	width: 100%;
	background-color: white;
	box-shadow: var(--blue3) -10px 10px;
	border-radius: 5px;
	min-height: 600px;
}

.container_layout_2 .container_layout_2_cover_image {
	flex: 1;
	background-image: url("../images/paraglide_photo.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

.container_layout_2 h2 {
	color: var(--blue);
	margin-bottom: 15px;
}

.container_layout_2 .container_layout_2_content {
	flex: 1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	text-align: justify;
	width: 100%;
	gap: 30px;
	padding: 30px;
}

.container_layout_2 .container_layout_2_content > div {
	flex: 1;
	max-width: 600px;
	min-width: 250px;
}

@media screen and (max-width: 1023px) {
	.container_layout_2 {
		flex-direction: column;
	}

	.container_layout_2 .container_layout_2_cover_image {
		flex: unset;
		min-height: 300px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		border-top-right-radius: unset;
	}
}

/* ACCUEIL */

#accueil_main {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	background-image: url("../images/landing_image.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	padding-right: 0;
	padding-bottom: 0;
}

@media screen and (max-width: 1023px) {
	#accueil_main {
		flex-direction: column;
		padding-top: 60px;
	}
}

#accueil_main section:first-of-type {
	display: flex;
	flex-direction: column;
	gap: 100px;
	max-width: min(560px, 100%);
	padding-right: 30px;
}

#accueil_h1_wrapper {
	color: var(--blue1);
	width: 380px;
}

#accueil_h1_wrapper h1 {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	box-sizing: border-box;
}

#accueil_h1_wrapper div {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	justify-content: flex-end;
}

#accueil_h1_wrapper span:first-of-type:not(div > span) {
	font-size: 64px;
	font-family: "SourceSans3Regular", sans-serif;
	line-height: 50px;
}

#accueil_h1_wrapper div span:first-of-type {
	font-size: 32px;
	font-family: "SourceSans3Light", sans-serif;
}

#accueil_h1_wrapper div span:nth-of-type(2) {
	font-size: 128px;
	font-family: "SourceSans3SemiBold", sans-serif;
	line-height: 100px;
}

#accueil_h1_wrapper span:last-of-type:not(div > span) {
	font-size: 64px;
	font-family: "SourceSans3Regular", sans-serif;
	line-height: 50px;
	align-self: flex-end;
	margin-right: 50px;
}

@media screen and (max-width: 480px) {
	#accueil_main section:first-of-type {
		padding-right: 15px;
	}

	#accueil_h1_wrapper {
		width: 280px;
		align-self: center;
	}

	#accueil_h1_wrapper span:first-of-type:not(div > span) {
		font-size: 48px;
		line-height: 30px;
	}

	#accueil_h1_wrapper div span:first-of-type {
		font-size: 24px;
		line-height: 30px;
	}

	#accueil_h1_wrapper div span:nth-of-type(2) {
		font-size: 96px;
		line-height: 80px;
	}

	#accueil_h1_wrapper span:last-of-type:not(div > span) {
		font-size: 48px;
		line-height: 30px;
	}
}

#accueil_content_wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	background-color: white;
	padding: 30px;
	border-radius: 5px;
	background-image: url("../images/landing_content_background.svg");
	background-size: 250px;
	background-position: top 20px right 20px;
	background-repeat: no-repeat;
	text-align: justify;
	margin-bottom: 30px;
}

#accueil_content_wrapper h2 {
	color: var(--blue1);
	font-size: 32px;
	font-family: "SourceSans3Light", sans-serif;
	width: 220px;
}

#accueil_content_wrapper h2 div {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	justify-content: flex-end;
}

#accueil_content_wrapper h2 p {
	line-height: 30px;
}

#accueil_content_wrapper h2 span {
	font-size: 64px;
	font-family: "SourceSans3SemiBold", sans-serif;
	line-height: 50px;
}

#accueil_content_wrapper button {
	align-self: center;
}

#accueil_content_wrapper_emphasis {
	color: var(--blue1);
	font-size: 1.2rem;
	align-self: center;
	text-align: center;
}

#accueil_main section:nth-of-type(2) {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	width: 250px;
}

#navette {
	margin-bottom: 30px;
	border: thick solid var(--blue1);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-right: none;
}

#news_container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	border-top-left-radius: 10px;
	padding: 30px;
	background: linear-gradient(0deg, rgba(13, 44, 99, 0.8) 0%, rgba(56, 155, 221, 0.8) 100%);
	height: 100%;
}

@media screen and (max-width: 480px) {
	#news_container {
		padding: 5px;
	}
}

#news_container h2 {
	display: flex;
	flex-direction: column;
	color: white;
	margin-bottom: 30px;
}

#news_container h2 span:nth-of-type(1) {
	font-size: 32px;
	align-self: flex-start;
	line-height: 40px;
}

#news_container h2 span:nth-of-type(2) {
	font-size: 64px;
	align-self: flex-end;
	line-height: 30px;
	margin-left: 20px;
}

#news_wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.news_item {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	padding: 15px;
	width: 420px;
	height: 100px;
	border-radius: 10px;
	background-color: white;
}

@media screen and (max-width: 480px) {
	.news_item {
		width: 340px;
	}
}

.news_date_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: var(--blue1);
	height: 30px;
}

.news_date_wrapper div:nth-of-type(1) {
	font-size: 36px;
}

.news_date_wrapper div:nth-of-type(2) {
	display: flex;
	flex-direction: column;
	text-align: right;
	line-height: 15px;
	font-family: "SourceSans3Light", sans-serif;
}

.news_content_wrapper {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news_content_wrapper h3 {
	color: var(--blue2);
	font-family: "SourceSans3SemiBold";
}

/* BLOG */

#blog_main iframe {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: none;
}

/* CLUB */

#club_main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	background: var(--green_horizontal_gradient);
}

@media screen and (max-width: 1023px) {
	#club_main {
		flex-direction: column;
		padding-top: 60px;
	}
}

#club_main h1 {
	display: flex;
	flex-direction: column;
	gap: 15px;
	color: white;
	padding-top: 0;
	margin-top: 30px;
	margin-bottom: 30px;
}

#club_main h1 span:nth-of-type(1) {
	font-family: "SourceSans3Regular", sans-serif;
	font-size: 32px;
	line-height: 20px;
	align-self: flex-start;
}

#club_main h1 span:nth-of-type(2) {
	font-family: "SourceSans3SemiBold", sans-serif;
	font-size: 64px;
	line-height: 40px;
	margin-left: 10px;
}

#club_main .container_layout_1,
#club_main .container_layout_2 {
	box-shadow: var(--green3) -10px 10px;
}

#club_main .container_layout_1 .container_layout_1_cover_image {
	height: 300px;
	background-image: url("../images/club_landing.jpg");
}

#club_main .container_layout_2 .container_layout_2_cover_image {
	background-image: url("../images/paraglide_photo.jpg");
}

#club_main .container_layout_1 h2,
#club_main .container_layout_2 h2 {
	color: var(--green1);
}