@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Chela+One&family=Exo:ital,wght@0,100..900;1,100..900&display=swap');


* {
	margin: 0;
	padding: 0;
}


body {
	background-image: url(images/bruit.jpg);
	background-repeat: repeat;

}


img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}


#container {
	max-width: 1200px;
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
}



/************************* header *************************/



	header {
		background-image: url('images/tarantino_entete.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
		padding-bottom: 5em;
	}


	header h1 {
		padding: 4%	45% 4% 10%;
		color: #f6de80;
		font-family: "Chela One", system-ui;
		font-size: 5em;
		line-height: 1;
		font-weight: 400;
		font-style: normal;
	}


/************************* navigation *************************/


	nav {
		overflow: hidden;
		margin: 1em auto;
		text-align: center;
	}


	.show-menu {
		text-decoration: none;
		color: #fff;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 1px;
		display: none;
	}


	/******* Hide checkbox *******/

	input[type=checkbox]{
	    display: none;
	}


	/******* Show menu when invisible checkbox is checked *******/

	input[type=checkbox]:checked ~ #menu{
	    display: block;
	}


	nav ul {
		list-style-type: none;
	}

	nav ul li {
		display: inline-block;
		margin-right: 3em;
		padding-right: 3em;
		border-right: 1px solid brown;
	}

	nav ul li:last-child {
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
	}


	nav ul li a {
		text-decoration: none;
		color: black;
		font-family: "Exo", sans-serif;
		font-size: 1em;
		font-weight: 500;
		font-style: normal;
	}


	nav ul li a:hover {
		color: lightgray;
	}


	.current a {
		display: block;
		color: #bc0000;
		font-weight: 600;
	}


/************************* main col_text *************************/


	main {
		overflow: hidden;
		margin-bottom: 2em;
	}


	/************** col_text **************/

	main #col_text {
		display: inline-block;
		float: left;
		width: 34%;
	}

	h2 {
		font-family: "Chela One", system-ui;
		font-size: 3em;
		font-weight: 500;
		font-style: normal;
	}


	main #col_text sup {

	}


	.annee {
		font-size: 60%;
	}

	h3 {
		display: inline-block;
		color: white;
		font-family: "Chela One", system-ui;
		font-size: 1em;
		font-weight: 100;
		font-style: normal;
		background-color: orange;
		margin: 0.5em 0 0 0;
		padding: 0 1%;
	}


	h4 {
		color: gray;
		font-family: "Chela One", system-ui;
		font-size: 1em;
		font-weight: 300;
		font-style: normal;
		margin-bottom: 1em;
	}


	main #col_text p {
		font-family: "Exo", sans-serif;
		font-size: 1em;
		font-weight: 400;
		font-style: normal;
		line-height: 1.5;
	}


	/********** col_text annonce ********/


	.line {
		width: 100%;
		height: 1px;
		background: darkgreen;
		border: none;
		transition: width 1s ease;
		transform-origin: right;
		margin-top: 2em;
	}

	.line-annonce:hover .line {
		width: 0;
	}

	#col_text .annonce {
		font-size: 60%;
		color: darkgreen;
		font-weight: 600;
		padding-top:  2em;
	}


	#col_text .annonce a {
		text-decoration: none;
		display: block;
		color: darkgreen;
	}



	/************** col_picture **************/



	main #col_picture {
		display: inline-block;
		float: left;
		width: 66%;
	}


	#picture1,#picture2,#picture3 {
		display: inline-block;
		float: left;
		width: 24.25%;
		padding-right: 1% ;
	}

	#picture4 {
		display: inline-block;
		float: left;
		width: 24.25%;
	}


	#photos {
		overflow: hidden;

	}



/************************* footer *************************/



	footer {

		font-family: "Exo", sans-serif;
		font-size: 1em;
		font-weight: 400;
		font-style: normal;
		line-height: 1.5;
		text-align: right;
		margin-top: 2em;
		padding-top: 1em;
		border-top: 1px dotted darkgreen;

	}


	footer a {
		color: black;
		text-decoration: none;

	}










/************************* version 810px *************************/


	@media screen and (max-width: 810px)

	{


		header {
			position: relative;
			padding-bottom: 3em;
		}


		header h1 {
			padding: 1em 5% 0 10% ;
			font-size: 3em;
		}


		nav ul {
		display: none;
		}


		.show-menu {
			display:block;
		}

		nav img {
			width: 4%;
		}

		nav ul li {
			display: block;
			margin-right: 0em;
			padding: 0.5em 0 0.5em 0 ;
			border-right: none;
			border-bottom: 1px solid brown;
		}

		nav ul li:last-child {
			border-bottom: none;
		}


		main #col_text {

			display: block;
			float: none;
			width: 100%;

		}

		main #col_picture {
			display: none;
		}


	}


/************************* version 414px *************************/


	@media screen and (max-width: 414px)

	{

		header {
	        background-size: 150% auto;
	        padding-bottom: 1em;
	    }

	    body > header:nth-child(1) > h1:nth-child(1) {
	  	padding-top: 10px;
		}


	    header h1 {
	        font-size: 2em;
	        padding: 0 5% 0 10% ;
	        line-height: 1.2;

	    }

	    main #col_text {
	    	display: block;
	        float: none;
	        width: 100%;
	        text-align: center;
	    }

	    main #col_text p {
	        text-align: left;
	    }

		main #col_picture {
		display: inline-block;
		float: none;
		width: 100%;
	}


		#picture1,#picture2,#picture3,#picture4 {
			display: none;
		}

		footer {
			text-align: center;
		}

	}