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


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

	100% {
		transform: rotate(30deg);
	}
}
/**********  COMMUN  *********/
:root{
	--home-color: #e74514;
	--orange: #e74514;
	--orange-clair: #EA8C2E;
	--marron: #9B4836;
	--vert: #007F3D;
	--arrondi-image:10px;
	--fond-page: #fbf9f5;
	font-family: "Mohave-Regular" ;
}
body{
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
	height:100vh;
	background-color: var(--fond-page);
}
.phone_only{
	display:none;
}
#contentWrapper{
	position:relative;
}
header{
	margin-top: 1rem;
	a{
		display:inline-block;
		width:150px;
		margin:4px 4px 4px 25vw;
	}
}
main{
	width:100%;
	margin:0 auto;
	padding-bottom:2rem;
}
#logo{
	display:block;
	max-width:100%;
}
#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;
	line-height:1.6em;
	color:var(--local-main-color);
	&:after{
		position:absolute;
		bottom:1rem;
		content:"";
		display:block;
		height:12px;
		width:calc(100% - 1rem);
		border-radius:8px;
		background: var(--local-secondary-color);
	}
}
h3{
	color:var(--orange-clair);
	text-decoration:underline;
	text-decoration-thickness: 3px;
	text-decoration-color: var(--orange-clair);
	font-size:2.5rem;
}
.bigFont{
	font-size:140%;
}
.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:var(--fond-page);
	margin-top:auto;
	position:sticky;
	bottom:0;
	width:100%;
	text-transform: uppercase;
	text-align: center;
	order:2;
	ul{
		margin:0;
		padding:0;
	}
	li{
		display:inline-block;
	}
	a{
		display:block;
		padding:1rem 3cqw;
		text-decoration: none;
		color:black;
		font-size:1.4rem;
		&:hover{
			text-decoration: underline;
		}
		&.current{
			text-decoration:underline;
			text-decoration-thickness: 2px;
		}
	}
}

#burgerIcon{
	cursor:pointer;
	display:none;
	font-size:14vw;
	position: absolute;
	z-index:98;
	top: 0;
	line-height: 0.7em;
	&:before{
		content: "\2630";
		color: var(--orange);
	}
}
/**********  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-wrapper {
				position: relative;
				width: var(--bulle-size);
				height: var(--bulle-size);
				float: left;
				margin: 10px;
			}
			.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);
			}
		}
		#bulleCreation {
			grid-area: a;
			margin: 0 auto;
			.circle-wrapper{
				--local-color:white;
			}
			.icon{
				color:var(--orange-clair);
			}
		}
		#bulleCustomisation {
			grid-area: b;
			align-self: center;
			.circle-wrapper{
				--local-color:#9B4836;
			}
		}
		#bulleEntreprise {
			grid-area: c;
			.circle-wrapper{
				--local-color:#EA8C2E;
			}
		}

		.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;
			}
			/*
			.icon {
				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{
	--local-main-color: var(--orange);
	--local-secondary-color: 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:var(--arrondi-image);
		&:hover{
			cursor:pointer;
		}
	}
	nav{
		background:var(--local-main-color);
		a{
			color:white;
		}
	}
}
#customisation {
	--local-main-color: var(--marron);
	--local-secondary-color: var(--orange);
	main {
		display:flex;
		justify-content: flex-start;
		align-items:start;
	}
	.grid{
		flex:1;
		margin-left:4rem;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		img{
			display:block;
			border-radius:var(--arrondi-image);
			width:100%;
			&:hover{
				cursor:pointer;
			}
		}
	}
	nav{
		background:var(--local-main-color);
		a{
			color:white;
		}
	}
	#textWrapper{
		flex-basis: calc(75% - 4rem);
	}
}


/* Lightbox avec <dialog> */
#dialog{
	max-height:80vh;
	max-width:80vw;
	--decalage-slider-btn: -0.3rem;
	--close-btn-width: 1px;
	padding:2rem;
	border:2px solid var(--orange);
	border-radius:10px;
	.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: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		border: var(--close-btn-width) solid black;
		border-radius: 0;
		background:white;
		cursor: pointer;
		overflow: hidden;
		border-radius:10px;
		&:focus,
		&:focus-visible {
			outline: none;
		}
		&: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{
	--local-main-color: var(--orange-clair);
	--local-secondary-color: var(--marron);
	nav{
		background:var(--local-main-color);
		a{
			color:white;
		}
	}
	.column{
		width:50%;
	}
}
#contact{
	--local-secondary-color: var(--vert);
	--local-main-color: var(--vert);
	h1{
		color:var(--local-main-color);
		&:after{
			background: var(--local-secondary-color);
		}
	}
	nav{
		background:var(--local-main-color);
		a{
			color:white;
		}
	}
	.column:nth-child(1){
		flex:1;
		img{
			width:100%;
			border-radius:var(--arrondi-image);
			display:block;
		}
	}
	.column:nth-child(2){
		flex:2;
		column-count: 2;
		gap:2rem;
	}
}
#savoirFaire{
	--local-main-color: var(--marron);
	--local-secondary-color: var(--orange-clair);
	nav{
		background:var(--local-main-color);
		a{
			color:white;
		}
	}
	ul {
		padding:0;
		color:var(--vert);
	}
	.column{
		text-align:center;
		font-size:2rem;
	}
	#textWrapper{
		width:80%;
		p:first-child{
			margin-top:0;
		}
	}
	ul li{
		list-style-type: none;
	}
}

/*@media only screen and (-webkit-min-device-pixel-ratio: 2){*/
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	.phone_only{
		display:block;
		text-align: center;
		font-size: 2rem;
		margin-bottom: 1em ;
	}
	:root{
		font-size:15px;
	}
	#burgerIcon{
		display:block;
	}
	nav[role="navigation"] {
		background: var(--fond-page);
		position: absolute;
		bottom:initial;
		left: -100%;
		z-index: 99;
		transition:left 0.4s ease-in;
		height:100vh;
		font-size:3.5rem;
		padding:0;
		&.active{
			left:0;
		}
		#closeBurgerBtn:before{
			content: "\2715";
			position:relative;
			top:0;
			right:0;
			font-size:3rem;
			color:black;
			cursor: pointer;
			font-size:14vw;
		}
		#burgerIcon{
			display:block;
		}
		#menu{
			padding:0;
			margin:0;
			margin-top:-1rem;
			list-style-type: none;
		}
		li{
			display:list-item;
			list-style-type: none;
		}
	}
	header{
		display: flex;
		flex-direction: column;
		align-items: center;
		#pageTitle{
			font-size:5rem;
		}
		#logoLink{
			margin:0;
			width:60%;
		}
		#logo{
			display:block;
			max-width: 100%;
		}
	}
	#contentWrapper{
		.main-container{
			flex-direction: column;
			.column{
				width:100%;
			}
		}
		.columnContainer{
			flex-direction: column;
		}
		.column:nth-of-type(2){
			column-count:1;
		}
	}
	#homePage{
		#burgerIcon:before{
			color:white;
		}
		#homeLogoWrapper{
			margin:1rem auto 0 auto;
			width:90%;
			display:flex;
			flex-direction: column;
			align-items: center;
		}
		#homeLogo{
			width:70%;

		}
		#homePitch{
			display:none;
			width:auto;
			margin-top:2rem;
			font-size:3rem;
		}
		#logoPitch{
			font-size: 2rem;
			line-height: 1em;
			text-align: center;
		}
		#bulles{
			--bulle-size:120px;
			list-style-type: none;
			.icon{
				font-size: 1.2em;
			}
		}
		.bulle{
		}
		.circle{
			display:none;
		}
		.icon{
			width:var(--bulle-size);
			height:var(--bulle-size);
			margin-right:calc(var(--bulle-size) + 1rem);
			border-radius: 50%;
		}
		#bulleCreation .icon{
			background-color: var(--orange-clair);
		}
		#bulleCustomisation .icon{
			background-color: var(--marron);
		}
		#bulleEntreprise .icon{
			background-color: white;
		}
	}
	#dialog{
		max-height:400px;
		msax-width:80vw;
	}
}