@media only screen and (min-width: 360px) {

	footer section#footer-1 {
		background-image: url('../images/ponton-top-720.webp');
	}
}

@media only screen and (min-width: 480px) {

	#header #menu-icon-handler {
    	grid-template-columns: 24px 5rem;
	}

	#header #menu-icon-handler::after {
		content: 'Menu';
		text-align: center;
		font-weight: bold;
		font-size: 1.1rem;
		color: var(--title);
		margin-bottom: 2px;
	}

	#header:has(#menu.visible) #menu-icon-handler::after {
		content: 'Fermer';
	}

	#cookie-banner {
		margin: .5em;
	}

	div.titre {
		font-size: 36px;
		line-height: 42px;
		letter-spacing: 0.36px;
	}

	footer section#footer-2 {
		padding-left: 6rem;
	}
}

@media only screen and (min-width: 640px) {

	div.titre {
		font-size: 48px;
		line-height: 72px;
		letter-spacing: 0.72px;
	}

	h1 {
		font-size: 48px;
		line-height: 72px;
		letter-spacing: 0.72px;
	}

	h2 {
		font-size: 36px;
		line-height: 42px;
		letter-spacing: 0.36px;
		margin-bottom: 40px;
	}

	h3 {
		font-size: 28px;
		line-height: 32px;
		letter-spacing: 0.28px;
	}

	h4 {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: 0.12px;
	}

	h5 {
		font-size: 20px;
		line-height: 32px;
		letter-spacing: 0px;
	}

	footer section#footer-1 {
		padding: 4rem;

		& div {
			padding: 2rem 7rem;
		}
	}
}

@media only screen and (min-width: 720px) {

	main section:first-child, main section:first-child::before {
		height: 100dvh;
	}

	main section:first-child::before {
		background-size: cover;
	}

	div.titre {
		font-size: 60px;
		line-height: 100px;
		letter-spacing: 1px;
	}

	.icon-down {
		display: block;
	}

	footer section#footer-1 {
		background-image: url('../images/ponton-top-2880.webp');
	}

}

@media only screen and (min-width: 1024px) {

	#header {

		&::before {
			content: none;
		}

		&.sticky-bar {
			box-shadow: 0px 3px 6px #1B335F33;
		}

		& #nav {
			justify-content: space-around;
			padding-inline: 0;
		}

		& .logo {
			padding-left: 0;
		}

		& .txt-logo {
			font-size: 17px;
		}

		& #menu {
			position: relative;
			flex-direction: row;
			max-width: 720px;
			overflow: hidden;
			padding-top: 0;
			align-self: center;
			justify-content: space-evenly;
			background-color: transparent;
			visibility: visible;
			opacity: 1;
			transform: none;
			box-shadow: none;

			&::before {
				content: none;
			}

			& li {
				padding: 0;
			}

			& li:first-child {
				visibility: visible;
			}
		}

		& #menu-icon {
			display: none;
		}

		& #menu-icon-handler {
			display: none;
		}
	}

	#menu-backdrop {
		display: none;
	}

	#cookie-banner {
		padding: 1rem 2rem;

		& #deny-cookies {
			right: -.5rem;
		}
	}
	
	div.titre {
		font-size: 80px;
		letter-spacing: 1.2px;
	}
	
	footer section#footer-3 {
		flex-direction: row;

		& #social-msg {
			width: 350px;
			justify-content: flex-start;
			order: 1;
		}

		& .logo {
			order: 2;
		}

		& #copyright {
			width: 350px;
			justify-content: flex-end;
			order: 3;
		}
	}
}

@media only screen and (min-width: 1280px) {

	footer section#footer-2 {
		padding-left: 1rem;
	}

	footer section#footer-2 > div > div {
		margin: 1.25rem 4rem;
		min-width: unset;
	}
}