/* FEUILLE DE STYLE ARTICLES NEWSLETTER*/

/* chargement des polices */
@font-face {
	font-family: 'Public-Sans-Black';
	src: local('Public-Sans-Black'), url('Polices/Public-sans/PublicSans-Black.woff'), format('woff');
}
@font-face {
	font-family: 'Public-Sans-Bold';
	src: local('Public-sans-bold'), url('Polices/Public-sans/PublicSans-Bold.woff'), format('woff');
}
@font-face {
	font-family: 'Gowunbatang-Regular';
	src: local('Gowunbatang-Regular'), url('Polices/GowunBatang/GowunBatang-Regular.woff'), format('woff');
}

/* Code CSS pour ordinateur */
@media (min-width: 769px) {
	#col {
		column-count: 2;
	}
	img {
		max-width: 70%;
		height: auto;
		margin-block-start: 1em;
	}

	body {
		width: 100%;
		padding: 0;
		margin: 0;
		color: #212320;
		background-color: #FFFCF4
	}

	div.body-text {
		display: block;
		position: absolute;
		top: 160px;
		margin-top: 0.5%;
		margin-right: 15%; 
		margin-left: 15%;
		padding: 0;
		background-color: #FFFCF4;
		z-index:1;
	}

	#header {
		position: fixed;
		z-index: 10;
		top: 0px;
		left: 0px;
		height: 27vh;
		width: 100%;
		padding: 0;
		margin: 0;
		color: #FFFCF4;
		background-color: #4C0297;
	}

	h1 {
		font-family: 'Public-Sans-Black', sans-serif;
		font-weight: bold;
		font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
		text-align: center;
		padding: 0;
		margin-top: 0.7em;
	}

	h2 {
		font-family: 'Public-Sans-Black', sans-serif;
		font-weight: bold;
		font-variant-caps: small-caps;
		font-size: xx-large;
		color: #212320;
		text-align: center;
		padding: 0;
		margin-block-start: 0.4em;
	}

	h3 {
		font-family: "Public-Sans-Bold", sans-serif;
		font-size: large;
		color: #212320;
		margin-block-start: 2em;
	}	

	p {
		font-family: "GowunBatang-Regular", serif;
		font-size: medium;
		color: #212320;
		margin-block-start: 0em;
	}

	hr {
		border: none;
		height: 2px;
		background-color: #f91616;
		margin-block-start: 2em;
	}
	
	ul {
		padding: 0;
		margin: 0;
		padding-left: 1.1em;
		font-weight: normal;
	}
	
	li {
		font-family: 'GowunBatang-Regular', serif;
		font-size: medium;
		color: #212320;
		margin-left: 0.2em;
		padding: 0;
		padding-bottom: 0.8em;
		font-weight: normal;
	}

	/* définitions de style pour le menu de navigation */
	div.menu-container {
		width: 100%;
		font-family: 'Public-Sans-Black', sans-serif;
		font-style: bold;
		font-size: medium;
	}

	.hamburger-icon {
		position: fixed;
		z-index: 20;
		top: 9.5vh;
		left: 6vw;
	}

	.hamburger-icon span {
		height: 5px;
		width: 40px;
		background-color: black;
		display: block;
		margin: 5px 0px 5px 0px;
		transition: 0.6s ease-in-out;
		transform: none;
		background-color: #FFFCF4;
	}

	.hamburger-icon span:hover {
		cursor: pointer;
	}

	#openmenu:hover {
		cursor: pointer;
	}

	#openmenu:checked ~ .menu-pane {
		left: -5vw;
		transform: translateX(-5vw);
	}

	#openmenu:checked ~ .body-text {
		display: block;
	}

	#openmenu:checked ~ .hamburger-icon span:nth-of-type(2) {
		transform: translate(-180%, -800%) rotate(-45deg);
		background-color: #FFFCF4;
	}

	#openmenu:checked ~ .hamburger-icon span:nth-of-type(3) {
		transform: translate(-180%, -1000%) rotate(45deg);
		background-color: #FFFCF4;
	}

	#openmenu:checked ~ .hamburger-icon span:nth-of-type(1) {
		opacity: 0;
	}

	#openmenu:checked ~ .hamburger-icon span:nth-of-type(4) {
		opacity: 0;
	}

	div.menu-pane {
		background-color: #D1271C;
		position: fixed;
		top: 0;
		transform: translateX(-130vw);
		transform-origin: (0, 0);
		width: 120vw;
		height: 27vh;
		transition-delay: 0.8s;
		transition: 1s ease-in-out;
		z-index: 12;
	}

	.menu-pane div {
		font-family: 'Public-Sans-Black', sans-serif;
		color: #FFFCF4;
		position: relative;
		left: -0.8%;
		padding-top: 1.8%;
		text-align: center;
		font-style: bold;
		font-size: xx-large;
	}

	.menu-pane nav {
		margin-top: 0.8%;
		margin-left: 28.5%;
	}

	.menu-links li, a {
		transition: 0.6s ease, 0.8s out;
		transition-behavior: allow-discrete;
		vertical-align: center;
	}

	.menu-links a {
		padding: 0.4em 1.2em 0.4em 1.2em;
	}

	.menu-pane ul {
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		padding: 0;
	}

	.menu-pane li {
		padding-top: 1em;
		padding-bottom: 1em;
		margin: 5px;
		font-size: medium;
		list-style-type: none;
		vertical-align: center;
	}

	.menu-pane li:first-child {
		font-size: 1em;
	}

	.menu-links li a {
		color: #FFFCF4;
		text-decoration: none;
		margin: 0;
	}

	.menu-links li:hover a {
		color: #D1271C;
	}

	.menu-links li:first-child:hover a {
		font-weight: bold;
		color: #FFFCF4;  
		background-color: #212320;
	}
	input.hamburger-checkbox {
		position: absolute;
		z-index: 21;
		top: 9vh;
		left: 5.5vw;
		width: 3.5vw;
		height: 6vh;
		opacity: 0;
	}
	
	#legal {
		position: relative;
		z-index: 30;
		width: 70vw;
		height: 1.5em;
		padding: 0.6rem;
		display: block;
		background-color: #4C0297;
		text-align: center;
		align-items: center;
	}
	
	#legal p{
		color: #FFFCF4;
		padding: 0;
		margin: 0;
	}
	
	#legal a{
		color: #FFFCF4;
		text-decoration: none;
		font-weight: normal;
	}
	
	#legal a:hover{
		cursor: pointer;
	}
	
	#legal a:active{
		color: #FFFCF4;
		font-weight: bold;
	}
		
	div#legal div{
		z-index: 29;
		position: relative;
		top: -35vh;
		margin-left: 20%;
		width: 60%;
		padding: 0.4em;
		display: none;
		background-color: #4C0297;
	}
	
	#legal:hover {
		background-color: #D1271C;
		color: #FFFCF4;
	}
	
	#legal:active div {
		display: block;
	}
	
	#legal hr{
		padding: 0;
		margin: 0.6rem 0 0.6rem 0;
	}
}

/* Code CSS pour mobile */
@media (max-width: 768px) {
	#col {
		column-count: 1;
	}
	img {
		max-width: 100%;
		height: auto;
		margin-block-start: 1em;
	}

	body {
		width: 100vw;
		padding: 0;
		margin: 0;
		color: #212320;
		background-color: #FFFCF4
	}

	div.body-text {
		position: absolute;
		top: 70px;
		z-index: 0;
		margin-top: 2vh; 
		margin-right: 10vw; 
		margin-bottom: 2vh; 
		margin-left: 10vw;
		background-color: #FFFCF4;
	}

	#header {
		display: none;
		position: absolute;
		top: 0;
		z-index: 10;
		height: 15vh;
		width: 100vw;
		padding: 0;
		margin: 0;
		color: #FFFCF4;
		background-color: #4C0297;
	}

	h1 {
		font-family: 'Public-Sans-Black', sans-serif;
		font-weight: bold;
		font-size: x-large;
		text-align: center;
		padding: 0;
		margin-top: 0.7em;
	}

	h2 {
		font-family: 'Public-Sans-Black', sans-serif;
		font-weight: bold;
		font-size: large;
		color: #212320;
		text-align: center;
		margin-block-start: 0.4em;
	}

	h3 {
		font-family: 'Public-Sans-Bold', sans-serif;
		font-size: medium;
		color: #212320;
		margin-block-start: 2em;
	}

	p {
		font-family: 'GowunBatang-Regular', serif;
		font-size: small;
		color: #212320;
		margin-block-start: 0em;
	}

	hr {
		border: none;
		height: 2px;
		background-color: #f91616;
		margin-block-start: 2em;
	}
	
	ul {
		padding: 0;
		margin: 0;
		padding-left: 1em;
		font-weight: normal;
	}
	
	li {
		font-family: 'GowunBatang-Regular', serif;
		font-size: small;
		color: #212320;
		margin-left: 0.1em;
		padding: 0;
		padding-bottom: 0.8em;
		font-weight: normal;
	}

	/* définitions de style pour le menu de navigation */
	div.menu-container {
		width: 100%;
		font-family: 'Public-Sans-Black', sans-serif;
		font-style: bold;
		font-size: small;
	}

	input.hamburger-checkbox {
		display: none;
		position: absolute;
		z-index: 13;
		top: 2vh;
		left: 4vw;
		width: 3.5vw;
		height: 6vh;
		opacity: 0;
	}
	
	.hamburger-icon {
		display: none;
		position: absolute;
		z-index: 12;
		top: 2vh;
		left: 4vw;
	}

	div.menu-pane {
		position: fixed;
		top: 0;
		background-color: #4C0297;
		width: 100vw;
		margin: 0;
		padding: 0 0 0.3em 0;
		z-index: 1;
	}

	.menu-pane div {
		font-family: 'Public-Sans-Black', sans-serif;
		color: #FFFCF4;
		padding: 0.6em 0 0 0;
		text-align: center;
		font-style: bold;
		font-size: 1em;
	}

	.menu-pane nav {
		margin: 0.2em 1em 0.2em 1em;
		text-align: center;
		vertical-align: middle;
	}

	.menu-links a {
		font-family: 'Public-Sans-Black', sans-serif;
		font-size: 0.8em;
		padding: 0.2em 1.6em 0.2em 1.6em;
	}

	.menu-pane ul {
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: 0;
		padding: 0;
	}

	.menu-pane li {
		padding-top: 0em;
		padding-bottom: 0em;
		margin: 2px;
		font-size: medium;
		list-style-type: none;
		vertical-align: center;
	}

	.menu-pane li:first-child {
		font-size: small;
	}

	.menu-links li a {
		color: #FFFCF4;
		text-decoration: none;
		margin: 0;
	}

	.menu-links li:hover a {
		color: #D1271C;
	}

	.menu-links li:first-child:hover a {
		font-style: bold;
		color: #FFFCF4;  
		background-color: #212320;
	}
	
	#legal {
		position: relative;
		z-index: 30;
		width: 76vw;
		height: 1.2em;
		padding: 0.5rem;
		display: block;
		background-color: #4C0297;
		text-align: center;
		align-items: center;
	}
	
	#legal p{
		color: #FFFCF4;
		padding: 0;
		margin: 0;
	}
	
	#legal a{
		color: #FFFCF4;
		text-decoration: none;
	}
	
	#legal a:active{
		color: #FFFCF4;
		font-weight: bold;
	}
		
	div#legal div{
		z-index: 29;
		position: relative;
		top: -35vh;
		margin-left: 0;
		width: 100%;
		padding: 0.4em;
		display: none;
		background-color: #4C0297;
	}
	
	#legal:active div {
		display: block;
	}
	
	#legal hr{
		padding: 0;
		margin: 0.6rem 0 0.6rem 0;
	}
}