@font-face
{
	font-family: cooper;

	src: url(./fonts/CooperHewitt-Medium.otf);
}
@font-face
{
	font-family: cooperLight;

	src: url(./fonts/cooper-hewitt/CooperHewitt-Light.otf);
}
@font-face
{
	font-family: cooperMedium;

	src: url(./fonts/cooper-hewitt/CooperHewitt-Medium.otf);
}
@font-face
{
	font-family: cooperSemiBold;

	src: url(./fonts/cooper-hewitt/CooperHewitt-Semibold.otf);
}

body
{
	margin: 0;
	padding: 0;

	font-family: cooperMedium;
}

main
{
	display: flex;

	flex-direction: column;
	gap: 3em;
}

footer
{
	display: flex;

	padding: 2em 4em;
}

.text-fr
{
	color: rgb(228,64,134);
}
.text-eus
{
	color: rgb(25,78,36);
}
.synopsis
{
	width: 50%;

	text-align: justify;
}


.header-image
{
	display: block;

	max-width: 100%;

	margin-right: auto;
	margin-left: auto;
}
.title-image
{
	display: block;

	width: 60%;

	margin-top: 2em;
	margin-right: auto;
	margin-left: auto;
}
.mockup-image
{
	display: block;

	width: 50%;

	margin-right: auto;
	margin-left: auto;
}
.container
{
	display: flex;

	gap: 3em;

	width: 90%;
	max-width: 90%;

	margin-right: auto;
	margin-left: auto;

	font-size: 2.3em;

	justify-content: center;
}


.button
{
	position: relative;

	width: 50%;
}
.button-image
{
	width: 100%;
}

#btn-fr::after
{
	position: absolute;

	height: 4em;
	width: 4em;

	right: .7em;
	bottom: -1.5em;

	background-image: url('./images/Papogorri_Pastille.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	color: red;

	content: '';
}

.container h3
{
	font-family: cooperSemiBold;
	color: #A17D56;

	text-align: center;
}
.link
{
	color: rgb(25,78,36);
	text-decoration: none;
}

.naia-oihan-photo
{
	height: 40%;
	width: 40%;

	margin-top: 3em;
}
.naia-oihan-desc
{
	display: flex;

	flex-direction: column;

	width: 60%;
}
.naia-oihan-desc p
{
	text-align: justify;
}

.naia-oihan-texte
{
	display: block;

	width: 80%;

	margin-right: auto;
	margin-left: auto;
}
.desc
{
	gap: 1em;

	margin-top: 0;
}

.footer-left
{
	width: 20%;
}
.footer-right
{
	flex-direction: column;

	max-width: 70%;
}

.soleil
{
	width: 80%;
}

.libellule
{
	width: 15%;
}

.footer-top-right
{
	display: flex;

	width: 100%;

	justify-content: space-between;
	align-items: center;
}

.footer-links-container
{
	display: flex;

	flex-direction: column;
	gap: .5em;
}
.footer-links-container a
{
	font-size: 1.7em;
	color: black;
	text-decoration: none;
}
.footer-right p
{
	font-size: 1.2em;
}
.mailto
{
	color: inherit;
	text-decoration: none;
}

.CG-page
{
	display: flex;

	flex-direction: column;
	gap: 10px;

	width: 90%;

	margin-right: auto;
	margin-left: auto;
	padding-top: 1em;

	font-size: 2em;
}

.CG-page h3
{
	font-family: cooperSemiBold;
	text-decoration: underline;
}
.justify-text
{
	text-align: justify;
}
.italic
{
	font-style: italic;
}
.br
{
	display: none;
}

/******************** max-width : 1400px **************************/

@media (max-width : 1400px)
{
	.container
	{
		font-size: 2em;
	}
	.footer-links-container a
	{
		font-size: 1.2em;
	}
	.footer-right p
	{
		font-size: 1em;
	}
	.CG-page
	{
		font-size: 2em;
	}
}

/******************** max-width : 768px **************************/

@media (max-width : 768px)
{
	main
	{
		gap: 2em;

		padding: 0 1em;
	}
	footer
	{
		width: 100%;

		margin: 0;
		padding: 0;
	}
	.title-image
	{
		width: 90%;
	}
	.container
	{
		flex-wrap: wrap;
		gap: 0;

		width: 100%;

		font-size: 1em;
	}
	.footer-links-container a
	{
		font-size: .8em;
	}
	.footer-right p
	{
		font-size: .6em;
	}
	.synopsis
	{
		width: 100%;
	}
	.naia-oihan-desc
	{
		width: 100%;
	}
	.button
	{
		width: 80%;
	}
	.naia-oihan-photo
	{
		width: 80%;
	}
	.CG-page
	{
		font-size: 1em;
	}
}

@media (max-width : 440px)
{
	.title-h3
	{
		width: 285px;
	}
	.br
	{
		display: block;
	}
}