:root {
	--header-height: 12dvh;
	--section-height: 100dvh;

	--header-color: rgba(255, 255, 255, 0.6);
	--section-bg-color: #0a2342ff;

	--news-width: 60dvh;

	--blue-adem-dark: #3173b9;
	--blue-adem-mid: #6ca5d9;
	--blue-adem-light: #a1cdee;
	--font-adem-color: #231f20;

	--afges-color: #f6a03c;
}

@font-face {
  font-family: "DroidSans";
  src: url("./fonts/DroidSans.ttf");
}

* {
	box-sizing: border-box;
	margin: 0;
	font-family: "DroidSans";
}

/* version mobile */

/* ========== MEDIA QUERIES POUR MOBILE ========== */
@media (max-width: 768px) {
    :root {
        --header-height: 8vh;
        --section-height: 90vh;
        --news-width: 90vw;
    }

    * {
        font-size: 14px;
    }

    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    div.info-sq {
        width: 90vw;
        padding: 10px;
        margin: 10px auto;
    }

    section {
        width: 100%;
        padding: 0 5px;
    }

    button, a.button {
        width: 90%;
        padding: 12px;
        font-size: 16px;
    }

    .news-container {
        width: 95vw;
        overflow-x: auto;
    }

    .news-item {
        min-width: 250px;
    }

    .header {
        height: var(--header-height);
        padding: 5px 10px;
    }

    .logo {
        width: 80px;
        height: auto;
    }
}

/* fin version mobile*/

#app {
	width: 100dvw;
	height: fit-content;

	header {
		position: fixed;
		height: var(--header-height);
		width: inherit;
		background-color: var(--header-color);
		backdrop-filter: blur(6px);
		z-index: 15;

		nav {
			height: inherit;
			width: inherit;

			li {
				height: inherit;
				width: inherit;
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin: auto;

				ul {
					padding: 0;
					margin: auto;
					font-size: 1.25rem;

					&:last-of-type {
						font-size: 1.75rem;
					}

					img{
						height: var(--header-height);
						padding: 2dvh;
					}
				}
			}
		}
		h1 {
			position: relative;
		}
	}

	main {
		section {
			height: var(--section-height);
			background-color: var(--section-bg-color);

			@media (max-width: 768px) {
				min-height: var(--section-height);
				height: fit-content;
			}

			&:nth-of-type(1) {
				padding-top: var(--header-height);
				padding-bottom: var(--header-height);
				height: calc(var(--section-height) + var(--header-height));
				background-image: url("media/petit_patio.jpg");
				background-size: cover;
				position: relative;
				display: flex;

				@media (max-width: 768px) {
					min-height: var(--section-height);
					height: fit-content;
				}

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100dvw;
					background-color: rgba(61, 121, 217, 0.473);
				}
			}

			&:nth-of-type(2){
				min-height: var(--section-height);
				height: fit-content;
				padding: 6dvh 0;
				display: flex;

				ul{
					width: fit-content;
					height: fit-content;
					max-width: 90dvw;

					display: flex;
					list-style: none;
					flex-direction: row;
					flex-wrap: wrap;
					padding: 0;
					margin: 0 auto;

					li{
						width: 20dvw;
						margin: 4dvh auto;
						background-color: var(--blue-adem-light);
						display: flex;
						border-radius: 6px;

						img{
							margin-top: 1dvw;
							border-radius: 50%;
						}

						*{
							max-width: 18dvw;
							margin: auto;
						}

						figcaption{
							margin-bottom: 1dvw;
							width: fit-content;
						}
					}
				}

				&:has(#map){
					display: flex;

					div#map{
						/* background-color: aliceblue; */
						margin: auto;
						width: 65dvw;
						height: 80dvh;
					}
				}
			}

			&:nth-of-type(2):has(.news-list){
				display: flex;
			}

			&:nth-of-type(3) {
				height: var(--section-height);
				background-image: url("media/fac.jpg");
				background-size: cover;
				position: relative;
				display: flex;

				@media (max-width: 768px) {
					min-height: var(--section-height);
					height: fit-content;
				}

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100dvw;
					background-color: rgba(61, 121, 217, 0.473);
				}
			}

			.news-embed {
				margin: auto;
				height: fit-content;
				width: fit-content;
				display: flex;

				/* background-color: rgb(82, 12, 62); */
				z-index: 10;
				overflow-x: scroll;
				overflow-y: hidden;
				max-width: 100%;

				ul {
					display: grid;
					grid-template-columns: 1fr 1fr;
					list-style: none;
					width: 100%;
					padding: 0;

					@media (max-width: 768px) {
						grid-template-columns: 1fr;
					}

					li {
						width: var(--news-width);
						background-color: var(--blue-adem-light);
						border-radius: 5px;
						display: flex;
						font-size: 1.5rem;

						&:first-child {
							grid-row: span 3;
							/* background-color: lightblue; */
							margin-right: 2dvw;
							height: var(--news-width); /* Ceci n'est pas une erreur */
							flex-direction: column;

							/* aspect-ratio: 1/1; */

							img {
								max-width: 100%;
								max-height: 100%;

								height: 100%;
								width: auto;
								flex: 4;
								object-fit: contain;
							}

							p {
								max-height: 20%;
								margin: auto;
								flex: 1;
								overflow-y: scroll;
								padding: 0 2dvh 2dvh 2dvh;
								text-align: center;
							}
						}

						&:nth-child(2),
						&:nth-child(3) {
							height: calc(var(--news-width) / 3);

							img {
								max-width: 100%;
								max-height: 100%;

								height: 100%;
								width: auto;

								object-fit: contain;
							}

							p {
								max-height: 100%;
								height: fit-content;
								margin: auto;
								flex: 1;
								overflow-y: scroll;
								text-align: center;
								padding: calc(var(--news-width) / 30);
							}
						}

						&:nth-child(2) {
							margin-bottom: calc(var(--news-width) / 30);

							img{
								border-top-left-radius: 5px;
								border-bottom-left-radius: 5px;
							}
						}
						&:nth-child(3) {
							margin: calc(var(--news-width) / 30) auto;
							flex-direction: row-reverse;

							img{
								border-top-right-radius: 5px;
								border-bottom-right-radius: 5px;
							}
						}

						&:not(:first-child) {
							margin-left: 2dvw;
						}

						&:last-child {
							margin: auto 0 0 auto;
							/* background-color: lightcoral; */
							height: calc(var(--news-width) / 6);

							a {
								height: fit-content;
								width: fit-content;
								margin: auto;
								font-size: 2rem;
							}
						}
					}
				}
			}

			.pres, .about-afges, .services, .contact {
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 55dvh;
				width: 60dvw;
				display: flex;
				font-size: 1.6rem;

				/* background-color: rgb(82, 12, 62); */
				z-index: 10;
				overflow-x: scroll;
				overflow-y: scroll;
				max-width: 100%;

				flex-direction: column;

				background-color: var(--blue-adem-light);
				border-radius: 32px;
				padding: 5dvh;

				&.about-afges{
					background-color: var(--afges-color);
				}

				&.services{
					p{
						text-align: center;
					}

					ul{
						list-style: none;
						padding: 0;
						text-align: center;
						display: flex;
						flex-direction: column;
						margin: auto 0;

						li{
							margin: 2dvh;

						}
					}
				}
			}

			.about-us,
			.where-when {
				position: relative;
				height: fit-content;
				width: fit-content;
				display: flex;
				column-gap: 50px;
				max-width: 100dvw;
				margin: auto;
				z-index: 10;

				@media (max-width: 768px) {
					flex-direction: column;
				}

				div {
					width: var(--news-width);
					height: var(--news-width);
					background-color: aliceblue;
					display: flex;
					flex-direction: column;

					* {
						margin: auto;
					}

					p {
						margin: auto 20px;
						height: 60%;
					}

					a {
						height: 15%;
						width: 65%;
						background-color: var(--blue-adem-dark);
					}
				}
			}

			.adherer, .privacy-policy{
				display: flex;
				flex-direction: column;
				margin: auto;

				p{
					background-color: var(--blue-adem-mid);
					width: 70dvw;
					margin: 0 auto;
					padding: 2dvw;
					font-size: 1.75rem;
					text-align: center;
					border-radius: 32px;
				}

				ul{
					background-color: var(--blue-adem-light);
					border-radius: 32px;
					display: flex;
					flex-direction: column;
					margin: 10dvh auto;
					width: 50dvw;

					li{
						margin: 2dvh auto;
						width: fit-content;

						h3{
							max-width: max-content;
							font-size: 1.6rem;
						}
					}
				}
			}

			.news, .news-list{

				&.news{
					position: relative;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					height: fit-content;
					width: fit-content;
					display: flex;
				}

				&.news-list{
					display: flex;
					margin: auto;
				}

				/* background-color: rgb(82, 12, 62); */
				z-index: 10;
				overflow-x: scroll;
				overflow-y: hidden;
				max-width: 100%;

				ul {
					display: grid;
					grid-template-columns: 1fr 1fr;
					list-style: none;
					width: 100%;
					padding: 0;

					li {
						width: var(--news-width);
						background-color: var(--blue-adem-light);
						border-radius: 5px;
						display: flex;
						font-size: 1.5rem;
						z-index: 5;

						grid-row: span 3;
						/* background-color: lightblue; */
						margin-right: 2dvw;
						height: var(--news-width); /* Ceci n'est pas une erreur */
						flex-direction: column;

						/* aspect-ratio: 1/1; */

						img {
							max-width: 100%;
							max-height: 100%;

							height: 100%;
							width: auto;
							flex: 4;
							object-fit: contain;
							border-radius: 4px;
							margin-top: 0;
						}

						p {
							max-height: 20%;
							margin: auto;
							flex: 1;
							overflow-y: scroll;
							padding: 0 2dvh 2dvh 2dvh;
							text-align: center;
							max-width: none;
						}
					}
				}
			}

			div.tmp{
				margin: auto;
				background-color: var(--blue-adem-light);
				padding: 2dvh;
				border-radius: 5px;
			}

			div.info-sq{
			border-radius: 5px;
			font-size: 1.5rem;

			a{
				text-align: center;
				align-content: center;
			}

			p {
				overflow-y: scroll;
			}

			img{
				aspect-ratio: 1/1;
				margin: 0;
				height: 80%;
				width: auto;
				object-fit: cover;
				margin: 2,5%, auto;
				border-radius: inherit;
			}
		}
		}
	}

	footer {
		height: 9dvh;
		background-color: var(--blue-adem-mid);
		display: flex;
		column-gap: 14dvw;
		align-items: center;
		justify-content: center;
	}
}