@font-face {
	font-family: "Mohave-Regular";
	src:
			local("Mohave-Regular"),
			url("../fonts/Mohave-Regular.ttf") format("truetype");
}


@keyframes spin {
	100% {
		transform: rotateZ(360deg);
	}
}

@keyframes heartbeat {
	0% {
	    zoom: 1.75 ;
	  }
	  20% {
	    zoom: 2.5 ;
	  }
	  40% {
	    zoom: 1.75 ;
	  }
	  60% {
	    zoom: 2.5 ;
	  }
	  80% {
	    zoom: 1.75 ;
	  }
	  100% {
	    zoom: 1.75 ;
	  }
}
@keyframes spintwo {
	
	100% {
		transform: rotate(30deg);
	}
}
/**********  COMMUN  *********/
:root{
	--home-color: #e74514;
	--orange: #e74514;
	--orange-clair: #EA8C2E;
	--marron: #9B4836;
	font-family: "Mohave-Regular" ;
}
body{
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
	height:100vh;
}
header{
	margin-top: 1rem;
}
main{
	width:100%;
	margin:0 auto;
}
#logo{
	display:block;
	width:150px;
	margin:4px 4px 4px 15vw;
}
#pageTitle{
	font-size:7rem;
	padding-left:1rem;
	padding-bottom:0.5rem;
	text-transform: uppercase;
	width:90%;
	margin:0 auto;
	margin-bottom: 1.5rem;
	position:relative;
	font-weight:normal;
	&:after{
		position:absolute;
		bottom:1rem;
		content:"";
		display:block;
		height:12px;
		width:calc(100% - 1rem);
		border-radius:8px;
		background: var(--home-color);
	}
}
h3{
	color:var(--orange-clair);
	font-size:2.5rem;
}
.main-container{
	width:80%;
	font-size:140%;
}
.columnContainer{
	width:80%;
	display:flex;
	justify-content: space-around;
	align-items: stretch;
	gap:3rem;
	p:first-child{
		margin-top:0;
	}
	h3 {
		text-transform:uppercase;
	}
}

nav{
	background:white;
	margin-top:auto;
	position:sticky;
	bottom:0;
	width:100%;
	text-transform: uppercase;
	text-align: center;
	ul{
		margin:0;
		padding:0;
	}
	li{
		display:inline-block;
	}
	a{
		display:block;
		padding:1rem 3cqw;
		text-decoration: none;
		color:#007F3D;
		font-size:1.4rem;
		&:hover{
			text-decoration: underline;
		}
		&.current{
			text-decoration:underline;
			text-decoration-thickness: 2px;
		}
	}
}

/**********  SPECIFIQUE  *********/
#homePage{
	display: flex;
	flex-direction: column;
	color:white;
	background-color:var(--home-color);
	background-image: url(../imgs/home-objet-1.jpg), url(../imgs/home-objet-2.jpg), url(../imgs/home-objet-3.jpg);
	background-position: 95% 10%, 60% 55vh, 2.4vw 25vh;
	background-size: 35%, 15%, 25%;
	background-repeat: no-repeat;
	height:100vh;
	margin:0;
	padding:0;
	main{
		margin:0;
	}
	#homeLogoWrapper{
		margin-top:5vh;
		position:relative;
		left:20%;
		display:flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		width: 40vw;
	}
	#homeLogo{
		display:inline-block;
		width:100%;
	}
	#logoPitch{
		text-align: center;
		margin: 0;
		font-size: 1.8cqw;
	}
	#homePitch{
		text-align: left;
		font-size: 2.3cqw;
		width:65%;
		text-wrap: wrap;
		margin-top:13vh;
	}
	ul{
		list-style-type: none;
	}
	#bulles{
		--bulle-size:13vw;
		--dash-thickness: 4.5px;
		display:grid;
		grid-template-areas: "b a"
  							         "b c";
		gap: 1.5vw .3vw;
		width: calc(2 * var(--bulle-size));
		position:absolute;
		right:10vw;
		bottom:10vh;

		.bulle{
			.circle{
				background-color: var(--local-color);
				border: var(--dash-thickness) dashed var(--local-color);
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				padding: var(--dash-thickness);
				background-clip: content-box;
				animation: spin 12s linear infinite;
				position:relative;
				bottom:calc(var(--dash-thickness) * 2);
				right:calc(var(--dash-thickness) * 2);
			}
			&:nth-of-type(1){
				grid-area: a;
				margin: 0 auto;
				a{
					--local-color:white;
				}
				.icon{
					color:var(--orange-clair);
				}
			}
			&:nth-of-type(2){
				grid-area: b;
				align-self: center;
				a{
					--local-color:#9B4836;
				}
			}
			&:nth-of-type(3){
				grid-area: c;
				a{
					--local-color:#EA8C2E;
				}
			}
		}
		.circle-wrapper {
			position: relative;
			width: var(--bulle-size);
			height: var(--bulle-size);
			float: left;
			margin: 10px;
		}

		.icon {
			position: absolute;
			color: #fff;
			font-size: 1.8cqw;
			text-transform: uppercase;
			top: 50%;
			left: 50%;
			transform: translate(-50%, calc(0.3em - 50%));
		}


		.circle-wrapper:hover {
			.circle {
				animation: spin 4s linear infinite;

				annnimation: hennartbeat 1.5s infinite;
			}
			.icon{
				transform-origin: current;
				animation: heartbeat 1.5s infinite;
			}
			.iiiicon {
				transform-origin: current;
				transform:rotate(40deg);
				transition:transform 2s linear(0, 0 5.5%, 0.02 8.9%, 0.068 11.8%, 0.148 14.3%, 0.454 19.2%, 0.993 24.2%, 0.271 30.3%, 0.124 32.3%, 0.077 34.1%, 0.129 35.9%, 0.286 37.7%, 0.998 42%, 0.38 45.6%, 0.241 47%, 0.196 48.3%, 0.241 49.6%, 0.375 50.9%, 0.993 54.2%, 0.473 57.1%, 0.363 58.2%, 0.329 59.2%, 0.363 60.2%, 0.474 61.3%, 0.994 64.2%, 0.592 66.5%, 0.471 68.4%, 0.585 70.2%, 0.993 72.8%, 0.699 74.8%, 0.614 76.4%, 0.701 78.1%, 0.995 80.4%, 0.806 82.2%, 0.751 83.6%, 0.802 85.1%, 0.996 87.4%, 0.903 88.9%, 0.875 90.2%, 0.897 91.4%, 0.999 93.9%, 0.968 95.9%, 1) 1s;
			}
		}
		.circle-wrapper:active .circle {
			animation: spin 2s linear infinite;
		}

	}

}
#creation{
	h1{
		color:var(--orange);
		&:after{
			background: var(--marron);
		}
	}
	/* Conteneur principal (80% de la largeur de l'écran) */
	.grid {
		width: 80%;
		margin: 0 auto;
		padding: 0;
	}

	/* Éléments de la grille */
	.grid-item {
		width: calc(25% - 7.5px); /* 25% moins 7.5px pour la marge (10px/2) */
		margin: 5px; /* 5px de chaque côté = 10px total entre les colonnes */
		box-sizing: border-box; /* Inclut les marges et paddings dans le calcul de la largeur */
		float: left;
	}

	/* Images dans les éléments */
	.grid-item img {
		display: block;
		width: 100%;
		margin-bottom: 10px; /* 10px de marge entre les images verticalement */
		border-radius:20px;
		&:hover{
			cursor:pointer;
		}
	}
	nav{
		background:var(--orange);
		a{
			color:white;
		}
	}
}
#customisation {
	main {
		display:flex;
		justify-content: flex-start;
		align-items:start;
	}
	h1{
		color:var(--marron);
		&:after{
			background: var(--orange);
		}
	}
	.grid{
		flex:1;
		margin-left:4rem;
		display: flex;
    	flex-direction: column;
    	gap: 2rem;
		img{
			display:block;
			width:100%;
			&:hover{
				cursor:pointer;
			}
		}
	}
	nav{
		background:var(--marron);
		a{
			color:white;
		}
	}
	#textWrapper{
		flex-basis: calc(75% - 4rem);
	}
}


/* Lightbox avec <dialog> */
#dialog{
	wisdth:25%;
	max-height:80vh;
	max-width:80vw;
	--decalage-slider-btn: -0.3rem;
	--close-btn-width: 1px;
	padding:2rem;
	border:2px solid var(--orange);
		border-radius:20px;
	.slideshow-dialog {
		border: none;
		background: transparent;
		padding: 0;
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.slideshow-dialog::backdrop {
		background: rgba(0, 0, 0, 0.9);
	}

	.slideshow-container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-direction: column;
	}

	.slide {
		text-align: center;
		padding: 0rem 1.8rem;
		position:relative;
	}

	#slideshow-image {
		max-width: 90%;
		max-height: 60vh;
		opacity: 0;
		transform: translateX(20px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.legende {
		color: black;
		margin-top: 10px;
		font-size: 1.2em;
		font-family: "Mohave-Regular";
	}
	#legendeTitre{
		color:var(--orange);
		font-size:2rem;
		text-transform: uppercase;
		margin:0 0;
	}
	#legendeBody{
		margin:0 0;
	}

	.close-slideshow {
		position: absolute;
		z-index:99;
		top: 20px;
		right: 20px;
		width: 20px;
		height: 20px;
		border: var(--close-btn-width) solid black;
		border-radius: 5px;
		background:white;
		cursor: pointer;
		overflow: hidden;
		&:focus {
			outline: none;
		}
		&:focus-visible {
			outline: 2px solid;
			outline-offset: 2px;
		}
		&:hover{
			border-color:var(--orange);
			&:before,
			&:after{
				background-color: var(--orange);
			}
		}
	}

	.close-slideshow::before,
	.close-slideshow::after {
		content: "";
		position: absolute;
		width: 141%;
		height: var(--close-btn-width);
		background-color: black;
		top: 50%;
		left: 50%;
	}

	.close-slideshow::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.close-slideshow::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: calc(50% - 1rem);
		color: black;
		font-weight: bold;
		font-size: 2.5rem;
		trsansition: 0.3s;
		user-select: none;
		-webkit-user-select: none;
		&:hover{
			color:var(--orange);
		}
	}
	.prev {
		left: var(--decalage-slider-btn);
	}
	.next {
		right: var(--decalage-slider-btn);
		rotate: 180deg;
	}

}

#entreprise{
	h1{
		color:var(--orange-clair);
		&:after{
			background: var(--marron);
		}
	}
	nav{
		background:var(--orange-clair);
		a{
			color:white;
		}
	}
	.column{
		width:50%;
	}
}
#contact{
	nav{
		background:var(--orange);
		a{
			color:white;
		}
	}
	.contactElmt{
		margin-right:2rem;
	}
}
#savoirFaire{
	h1{
		color:var(--marron);
		&:after{
			background: var(--orange-clair);
		}
	}
	nav{
		background:var(--marron);
		a{
			color:white;
		}
	}
	#textWrapper{
		width:80%;
		p:first-child{
			margin-top:0;
		}
	}
	ul li{
		list-style-type: none;
	}
}
/*
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	:root{
		font-size:15px;
	}
	#homePage{
		#homeLogoWrapper{
			margin:1rem auto 0 auto;
			left:auto;
			width:80%;
		}
		#homePitch{
			width:auto;
			margin-top:2rem;
		}
		#logoPitch{
			font-size:5rem;
		}
		#homePitch{
			font-size:3rem;
		}
		#bulles{
			--bulle-size:25vw;
		}
	}
	nav{
		
	}
}
*/