@layer generic {

	body > *
	{
		padding: var(--spacing-base);
		text-align: justify;
	}

	h1, h2, h3, h4, h5, h6
	{
		margin: var(--spacing-base);
		font-family: var(--font-family-accent);
		text-align: center;
	}

	/* Hero Section */
	.hero-section h1
	{
		height: 25vh;
	}

	.hero-section h2
	{	
		font-size: var(--font-size-accent);
		color: var(--color-primary);
		text-shadow: var(--text-shadow-primary);
	}


	/* Liste d'images */

	.picture-list
	{
		display: grid;
		grid-gap: var(--spacing-base);
		justify-content: center;
		align-content: center;
		margin: var(--spacing-base) 0;
		text-align: center;
	}


	.picture-list > article
	{
		display: flex;
		flex-direction: column;
	}

	.picture-list > article > h3
	{
		order: 1;
		font-size: var(--font-size-md);
		margin: 0;
	}

	ul.picture-list
	{
		list-style-type: none;
	}

	/* Formulaires */
	form
	{
		display: flex;
		flex-direction: column;
	}

	form > *
	{
		margin-bottom: var(--spacing-base);
	}

	form input[type="text"],
	form input[type="email"]
	{
		padding: var(--spacing-base);
	}

	form label
	{
		font-size: var(--font-size-sm);
	}

	/* Boutons */
	#mailbox button
	{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: var(--spacing-base);

		border: 2px solid var(--color-dark);
		background-color: var(--color-lavender);
		box-shadow: -0.2rem .2rem 0 var(--color-dark);
		transform: translate(.2rem, -0.2rem);
		
		font-family: var(--font-family-accent);
		font-size: var(--font-size-lg);
		color: var(--color-light);
		text-shadow: var(--text-shadow-dark);
		text-align: center;
	}

	#mailbox button:hover
	{
		box-shadow: none;
		transform: initial;
	}

	#mailbox button:disabled
	{
		border: none;
		background-color: var(--color-translucent-dark);
		box-shadow: none;
		transform: initial;
	}

	/* Call To Actions */
	.cta
	{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 0;
		margin: .5rem auto;
		padding: var(--spacing-lg);
		font-family: var(--font-family-accent);
		font-size: var(--font-size-accent);
		color: var(--color-primary);
		text-align: center;
		z-index: 1;
	}

	a.cta
	{
		text-decoration: initial;
	}

	/* Media queries */

	@media screen and (orientation: portrait) {

		/* Hero Section */

		.hero-section
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: calc((var(--full-width) * 4 / 3) + 13.5rem);
			padding: 0;
		}

		.hero-section p
		{
			order: 2;
			height: 12rem;
			padding:  clamp(1.5rem, 80%, 3.5rem) var(--spacing-base);
			margin-bottom: -1rem;
			background-color: var(--color-dark-lavender);
			clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 calc(100% - 1rem));
			color: var(--color-light);
			text-shadow: var(--text-shadow-dark);
		}

		.hero-section .side-image
		{
			position: absolute;
			top: 0;
			left: 0;
			width: var(--full-width) ;
			z-index: -1;
		}

		.hero-section .side-image img
		{
			width: var(--full-width) ;
		}

		/* Liste d'images */

		.picture-list
		{
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
		}

	}

	@media screen and (orientation: landscape) {

		/* Hero Section */
		.hero-section
		{
			--section-height: 92vh;

			display: grid;
			grid-template-columns: auto calc(var(--section-height) * 3 / 4);
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 2fr 1fr auto 6rem;
			grid-template-areas: "logo side" "tagline side" "desc side" "cta side";
			grid-gap: var(--spacing-base);
			justify-items: center;
			height: var(--section-height);
			margin-bottom: -1rem;
			padding: 0;
			padding-left: var(--spacing-base);
			background-color: var(--color-lavender);
			color: var(--color-light);
			text-shadow: var(--text-shadow-dark);
		}

		.hero-section h1
		{
			grid-area: logo;
			margin: 0;
		}

		.hero-section h2
		{
			grid-area: tagline;
			margin: 0;
			color: var(--color-light);
			font-size: var(--font-size-xl);
		}

		.hero-section p
		{
			grid-area: desc;
			margin: 0;
			max-width: 40em;
			padding: var(--spacing-base);
			background-color: var(--color-dark-lavender);
		}

		.hero-section .cta
		{
			--cta-height: 5rem;

			grid-area: cta;
			width: calc(3 * var(--cta-height));
			height: var(--cta-height);
		}

		.hero-section .side-image
		{
			grid-area: side;
			z-index: 1;
		}

		.side-image img
		{
			border: .4rem solid var(--color-dark);
			transform: rotate(2deg);
			margin-right: var(--spacing-base);
		}

		/* Liste d'images */

		.picture-list
		{
			grid-template-columns: repeat(4, 1fr);
		}

		/* Call To Actions */
		.cta
		{
			padding: var(--spacing-base);
			max-width: 20em;
		}


	}
}