:root {
	/* variable de taille et position*/
    --top-tomate: 80vh;
	--height-burger: 18px;
	--width-burger: calc(var(--height-burger) * 1.414);
	/* variable de couleur*/
	--red-gradient: linear-gradient(35deg, #990000, #FF0000);
	--green-gradient: linear-gradient(35deg, #17501c, #008C06);
	--red-solid: #990000;
	--green-solid: #008C06;
	--hot-white: rgba(248, 248, 255, 1);
	--dark-gray: rgba(0, 0, 0, 1);
	--hot-white-bg: rgba(248, 248, 255, 0.8);
	--dark-gray-bg: rgba(0, 0, 0, 0.6) ;
	--ombre: rgba(0, 0, 0, 0.3);
	/*variable des swiper*/
	--swiper-pagination-color: #990000;
	--swiper-navigation-color: #008C06;
}

/*reset CSS*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;	
}

body {
    font-family: Arial, sans-serif;
    overflow-x: hidden;
	font-size: 1em;
	font-family: "Lexend", sans-serif;
	font-weight: 200;
}
/*-----------------------------*/
/*------- FOND PARALLAX -------*/
/*-----------------------------*/

	/*z-index -> 0 à 49 background fixed*/
	/*z-index -> 50 à 99 floating background*/
	
	/*images fixes*/
	.fixed-image{
		position: fixed;
		/*effet blur sur le fond*/
		filter: drop-shadow(0 10px 30px var(--ombre));
		-webkit-filter: blur(4px);
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover; /* version standardisée */
	}
	.background {
		z-index: 1;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
	}	
	.bras {
		z-index: 2;
		height: 200px;
		top: 80%;
		left: 0;
	}
	.pizza{
		z-index: 2;
		height: 100px;
		top: 0;
		right: 0;
	}
	
	/*images animées*/
	.floating-image {
		position: absolute;
		border-radius: 15px;
		filter: drop-shadow(0 10px 30px var(--ombre));
		/*effet blur sur le fond*/
		-webkit-filter: blur(4px);
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover; /* version standardisée */
	}
	.basilic1 {
		z-index: 60;
		width: 150px;
		left: 30%;
		top: 10%;
	}
	.basilic2 {
		z-index: 61;
		width: 140px;
		left: 5%;
		top: 30%;
	}
	.basilic3 {
		z-index: 62;
		width: 120px;
		right: 15%;
		top: 60%;
	}
	.basilic4 {
		z-index: 63;
		width: 150px;
		left: 10%;
		top: 80%;
	}
	.basilic5 {
		z-index: 63;
		width: 100px;
		left: 10%;
		top: 120%;
	}
	.basilic6 {
		z-index: 63;
		width: 120px;
		left: 80%;
		top: 160%;
	}
	.basilic7 {
		z-index: 63;
		width: 120px;
		left: 60%;
		top: 200%;
	}

	.tomate1 {
		z-index: 55;
		width: 130px;
		left: 80%;
		top: var(--top-tomate);
	}
	.tomate2 {
		z-index: 54;
		width: 130px;
		left: 80%;
		top: calc(var(--top-tomate) + 5%);
	}
	.tomate3 {
		z-index: 53;
		width: 130px;
		left: 80%;
		top: calc(var(--top-tomate) + 7.4%);
	}
	.tomate4 {
		z-index: 52;
		width: 130px;
		left: 80%;
		top: calc(var(--top-tomate) + 10%);
	}
	.tomate5 {
		z-index: 51;
		width: 130px;
		left: 80%;
		top: calc(var(--top-tomate) + 13%);
	}
	
	.pate {
		z-index: 56;
		width: 200px;
		left: 8%;
		top: 60%;
	}	

/*----------------------------*/
/*------- BARRE ENTETE -------*/
/*----------------------------*/
	
	/*z-index -> 100 à 200 content*/
	/*z-index -> 1000 à 1100 menu responsive*/
	
	/*--- structure ---*/
	#main-nav{
		z-index: 190;
		position: fixed;
		display: flex;
		width: 100%;
		height: 50px;
		top: 0;
		left: 0;
		box-shadow: 0 0 8px black;
		background: var(--dark-gray-bg);
	}
	

	h1{
		font-size: min(5vw, 2em);
		filter: drop-shadow(2px 2px 1px var(--ombre));
		z-index: 192;
		align-content: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		background-color: transparent;
		/*Voir dans "Main" pour le dégradé rouge*/
	}
	#petit-logo{
		z-index: 193;
		margin: 4px;
		
	}
		
	/* ------ MENU RESPONSIVE------ */	
	#menu-nav {
		width: 100%;
		z-index: 193;
		flex: 100px;
	}
		/* afficher le menu et le cacher à droite de l'ecran */
		#menu {
			display: block;
			position: absolute;
			margin: 0;
			right: 0;
			top: 0;
			width: 100vw;
			height: 600vh;
			z-index: 1001;
			transform-origin: 0% 0%;
			transform: translate(100%, 0);
			transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
		}
		#menu ul {
			display: flex;
			flex-direction: column;

			position: absolute;
			margin: 0;
			right: 0;
			top: 0;

			min-width: 2vw;
			height: 100vh;
			padding: 5vh 0 0;

			text-align: center;

			background: var(--hot-white-bg);
			list-style-type: none;
			-webkit-font-smoothing: antialiased;
		}
		#menu li {
			padding: 12px 12px;
		}
		#menu a {
			white-space: nowrap;
			color: var(--dark-gray);
			text-decoration: none;
		}

		/* défini la classe "open" pour JS pour le mouvement de droite à gauche */
		#menu.open {
			transform: none;
			position: fixed;
		}

	/* --- BURGER ICON --- */
	/* position du burger */
	#burger_icon {
		display: block;
		position: absolute;
		right: 0;
		margin: 16px;
		width: var(--width-burger);
		height: var(--height-burger);

		z-index: 1010;

		-webkit-user-select: none;
		user-select: none;
		cursor: pointer;
	}

		/* forme du burger */
		#burger_icon span {
			display: block;
			position: absolute;
			height: 3px;
			width: 100%;
			margin-bottom: 4px;

			background: var(--hot-white);
			border-radius: 5px;

			z-index: 1011;

			opacity: 1;
			left: 0;

			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: 0.25s ease-in-out;
			-moz-transition: 0.25s ease-in-out;
			-o-transition: 0.25s ease-in-out;
			transition: 0.25s ease-in-out;
		}

		/* position des 3 span pour former le burger */
		#burger_icon span:nth-child(1) {
			top: 0px;
			-webkit-transform-origin: left top;
			-moz-transform-origin: left top;
			-o-transform-origin: left top;
			transform-origin: left top;
		}
		#burger_icon span:nth-child(2) {
			top: calc(var(--height-burger) / 2);
			-webkit-transform-origin: left center;
			-moz-transform-origin: left center;
			-o-transform-origin: left center;
			transform-origin: left center;
		}
		#burger_icon span:nth-child(3) {
			top: var(--height-burger);
			-webkit-transform-origin: left bottom;
			-moz-transform-origin: left bottom;
			-o-transform-origin: left bottom;
			transform-origin: left bottom;
		}

		/* transform du burger en croix à l'ouverture*/
		/*changement de couleur à l'ouverture*/
		#burger_icon.open span {
			background: var(--dark-gray-bg);
		}
		/* le premier span tourne 45°*/
		#burger_icon.open span:nth-child(1) {
			width: 109%;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		/* le deuxieme disparait */
		#burger_icon.open span:nth-child(2) {
			width: 0%;
			opacity: 0;
		}
		/* le troisieme tourne à -45°*/
		#burger_icon.open span:nth-child(3) {
			width: 109%;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

/*----------------------------------*/
/* --------- CONTENU MAIN --------- */
/*----------------------------------*/
	/*design des titres*/
	h1, h2, h3{
		font-family: "Akaya Kanadaka", system-ui;
	}


	.h2-bg{
		z-index: 150;
		display: flex;
		align-content: center;
		justify-content: center;
		text-align: center;
		width: 100vw;
		background-color: var(--hot-white-bg);
		margin: 2vh 0;
		padding: 1vh 0;
	}
	@supports (-webkit-background-clip: text) {
	  h1 {
		background-image: var(--red-gradient);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	  }
	  h2 {
		color: red;
		width: fit-content;
		font-size: 2em;
		filter: drop-shadow(2px 2px 1px var(--ombre));
		background-image: var(--red-gradient);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	  }
	  h3 {
		z-index: 150;
		display: flex;
		align-content: center;
		justify-content: center;
		text-align: center;
		background-color: transparent;
		margin: 10px;
		color: green;
		width: fit-content;
		font-size: 1.5em;
		letter-spacing: 0.1em;
		filter: drop-shadow(3px 3px 2px var(--ombre));
		background-image: var(--green-gradient);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	  }
	}

	/* design generale*/
	main{
		position: relative;
		z-index: 100;
		width: 100vw;
		color: var(--dark-gray);
		margin: 5vh 0;
	}
	.section{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-wrap: wrap;
		margin: 4px;
	}
	.sous-section{
		background-color: transparent;
		width: 95%;
		max-width: 900px;
		border-radius: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 2px;
		padding: 2px;
	}
	


	button, .link{
		color: var(--hot-white);
		padding: 3px 20px;
		margin: 10px;
		width: fit-content;
		font-size: 1em;
		filter: drop-shadow(2px 2px 1px var(--ombre));
		background: radial-gradient(rgba(80, 80, 80, 1), black) padding-box,
				  var(--green-gradient) border-box;
		border-radius: 50em;
		border: 2px solid transparent;
		text-decoration: none
	}
	
	/*--------------SWIPER------------------*/
		
		.swiperNews{
			width: 100%;
			max-width: 800px;
			min-height: 250px;
		}
		.swiperPizza{
			width: 100%;
			max-width: 800px;
			min-height: 250px;
			
		}
		.swiper-slide{
			align-content: center;
			border-radius: 2em;
		}
		.image-card{
			width: max(150px, 20%);
			margin: 4px;
			border-radius: 50%;
		}
		.container-card{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			align-items: center;
			min-height: 200px;
			gap: 20px;
			padding: 5px;
		}
		.cc-bg{
			background-color: var(--hot-white);
			border-radius: 2em;	
			border: solid 1px var(--green-solid);
			box-shadow: inset 1px 1px 2px gray;
		}
	
	/* affichage sous sections individuelles*/	
		/*--1-- sous section "logo et bouton appelle" */
		#top-page{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		#gros-logo{
			height: 15vh;
			margin: 30px;
		}
		 
		/*--2-- sous section "en ce moment" */
		#pizza-moment{
			max-width: 600px;
			width: 62%;
		}
		
		/*--3-- sous section "histoire de l'entreprise" */
		#histoire{
			display: flex;
			flex-direction: column;
			width: 100%;
			max-width: 900px;
			padding: 10px;
		}
		#histoire-content{
			margin: 4px;
			justify-content: center;
			text-align: left;
		}
		#boss-image{
			z-index: 100;
			height: 15vh;
			border: solid 2px;
			border-color: var(--dark-gray-bg);
			border-radius: 50%;
			margin: 10px;
		}
		#img-prez{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-around;
		}
		.photo-resto{
			max-height: 120px;
			margin: 10px;
		}
		
		/*--4-- sous section "pizza du moment" */
		#pizza-moment{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
		}
		
		
		
		/*--5-- sous section "carte des pizzas" */
		#menu-grid{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			background-color: gray;
		}
		
		/*--6-- sous section "carte des boissons" */
		
		/*--7-- sous section "carte des desserts" */
		
		
		/*--8-- sous section "contact" */
		
		#contact{
			width: 95%;
			max-width: 900px;
			border-radius: 50px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
		}
		
		
		
		#maps{		
			min-width: 100px;
			max-width: 450px;
		}
		#adresse{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-content: center;
			align-items: center;
			justify-content: center;
			margin: 10px;
		}
		
		
		/*--9-- sous section "horraires" */
		
		
		/*--10-- sous section "avis clients" */
		
	
/* --- FOOTER --- */
		
	#footer{
		z-index: 300;
		position: fixed;
		top: calc(100vh - 70px);
		left: 0;
		width: 100%;
		height: 70px;
		
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"a a a"
			"b c d";
		justify-items: center;
		align-items: center;
		color: var(--hot-white);
		box-shadow: 0 0 8px black;
		background: var(--dark-gray-bg);
		font-size: min(2vw,0.8em);
	}
	#social-links{
		z-index: 301;
		grid-area: a;
	}
	#mention-legal{
		z-index: 300;
		grid-area: b;
		text-align: center;
	}
	#a-propos{
		z-index: 300;
		grid-area: c;
		text-align: center;
	}
	
	#createur{
			z-index: 300;
			display: flex;
			flex-direction: row;
			align-content: center;
			text-align: center;
			flex-wrap: wrap;
			grid-area: d;
	}
	#logo-dtonn{
		height: 30px;
	}
	.icon-btn{
		margin: 4px 20px;
		height:25px;
		background-color: var(--hot-white-bg);
		border-radius: 50%;
	}
	a{
		color: white;
	}