@media (max-width: 576px) {
	.container {
		width: 95%;
	}
	
	html, body {
	  	font-size: 75% !important;
	  }
}

/* MODIFICATION GRID */
@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 95%;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 90%;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

.container-fluid {

	padding:0;

}
/* FIN - MODIFICATION GRID */

body.menu-open {
  overflow: hidden;
}

/* RESET */
button {
	border: none;
}
/* FIN - RESET */

/* FONT */
@font-face {
	font-display: block;
	font-family: "bootstrap-icons";
	src: url(/bootstrap/fonts/bootstrap-icons.woff2") format("woff2"),
	url("/bootstrap/fonts/bootstrap-icons.woff") format("woff");
}
/* FIN - FONT */

body, html {

	background-color: #fcfcfc;

	font-family: Calibri, "sans-serif;";
	font-size: 100%;

	padding: 0;
	margin: 0;

}

/* CLASS GENERAL */
.relative { position:relative;  }

section {

	margin-top:80px;

	&:first-of-type {
		margin-top: 100px;
}

}
/* FIN - CLASS GENERAL */


/* TYPOGRAPHIE */
h1 {

	margin: 0 0 35px 0;
	font-family: Lobster;

	font-weight: 100;
	font-size: 3.75rem;
	color: #1c1c1b;

	span {
		font-size: 1.85rem;
		color: #5c5c5c;
	}
}

h4 {

	font-size: 1.2rem;
	font-weight:400;

	margin-top:0;

	a { color:inherit; text-decoration:none;  }

	i {
		font-size:1.5rem;
		margin-right: 25px;
		vertical-align: -.2rem;
	}

}

p {

	font-size: 1.25rem;
	color: #4c4c4c;
	font-weight: 100;

}

b {

	font-weight: 600;
	color: #1c1c1b !important;
}
/* TYPOGRAPHIE - FONT */

/* VISUEL PHOTOBOOTH  */
.photobooth-container {
  position: relative;
  width: 100%;
  max-width: 468px;
  margin: -80px auto 0 auto;

	@media( max-width: 576px ) {
		max-width: 75%;
	}

}

.photobooth-container img.relative {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.photobooth-container img.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.gsap-trepied, .gsap-flash {
	z-index: 1 !important;
}

.gsap-photobooth {
	z-index: 2 !important;
}

/* FIN - VISUEL PHOTOBOOTH */

/* HEADER - 1 */
header {
  z-index: 10000;
  position: fixed;
  top:0;
  width: 100%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(3px);
  border-bottom: 4px solid #fff;
  height: 80px;

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;

    .logo {
      /*flex: 2;*/
      display: flex;
      height: 100%;
			align-content: center;

			margin: 0;

      img {
        height: 60%; /* Adapte l'image à 80% de la hauteur du parent */
        width: auto;
        object-fit: contain;
        display: flex;
      }
    }

    nav {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      ul {
        width: 500px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
          list-style: none;

          a {
            text-decoration: none;
            color: #4c4c4c;
            font-size: 1.4rem;

            transition: 0.2s ease-in-out;

            &.active {
            	font-weight: bold;
            	font-size: 1.8rem;
            }
          }
        }
      }
    }

    .nav-toggle {
      font-size: 2.2rem;
      width: 48px;
      color: #4c4c4c;
      display: flex;
      height: 100%;
      align-content: center;
      cursor: pointer;
      z-index: 10001;
    }
  }

  @media (min-width: 992px) {
    .logo,
    .nav-toggle {
      display: none; /* Cache le logo et le toggle */
    }

    nav {
      ul {
        display: flex; /* Affiche la navigation */
      }
    }
  }

  @media (max-width: 992px) {

  	& {

  		height: 50px;

  		img { height:70% !important; }

  	}

    .logo {
      display: flex; /* Affiche le logo */
    }

    .nav-toggle {
      display: flex; /* Affiche le toggle */
    }

    nav {
      /*display: none !important;*/ /* Cache la navigation entière */
      background: rgba(255, 255, 255, .95);
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1000;

      transform: translateX(-100%);
      opacity: 0;
      transition: 0.2s ease-in-out;

      &.open {
      	overflow: hidden;
      	opacity: 100%;
      	transform: translateX(0);
      }

      ul {

      	height: 400px !important;
      	width:50% !important;
      	flex-direction: column;

      	li {

      		width: 100%;
      		text-align: center;
      		padding-bottom: 22px;
      		border-bottom: 1px solid #ccc;

      		&:last-child {

      			border: none;

      		}

      	}

      	li a {

      		font-size: 2.2rem !important;

      	}

      }

    }
  }
}
/* FIN - HEADER */

/* BOUTON */
.btn {

	cursor: pointer;

	display: inline-block;
	box-sizing: border-box;

	background-color: #5c5c5c;
	/*background-color: #1c1c1b;*/

	font-family: Lobster;
	font-size: 1.5rem;
	color: #fff;
	text-decoration: none;
	text-align: center;

	padding: 15px 30px;

	-webkit-border-radius: 10px;
	border-radius: 10px;

	&.btn-line {
		background-color: transparent;
		border: 1px solid #c7c7c7;
		color: #5c5c5c;

		&:hover {

			outline:4px solid #c7c7c7;
			outline-offset: -4px;

			-webkit-transition: all 0.1s ease;
			-moz-transition: all 0.1s ease;
			-ms-transition: all 0.1s ease;
			-o-transition: all 0.1s ease;
			transition: all 0.1s ease;

		}

	}

	&.btn-fluid {

		width: 100%;

	}

	&:not(.btn-line):hover {

		/*scale: 1.04;*/

		background-color: #1c1c1b;
		outline:4px solid #a49ca4;
		outline-offset: -4px;

		-webkit-transition: all 0.1s ease;
		-moz-transition: all 0.1s ease;
		-ms-transition: all 0.1s ease;
		-o-transition: all 0.1s ease;
		transition: all 0.1s ease;

	}

	&.icon-info::before {

		font-family: "bootstrap-icons";
		display: inline-block;
		content: "\F434";
		margin-right: 5px;
		vertical-align: -.125em;

	}

}

/* LIST-GROUP */
ul.list-group {

	list-style:none;
	padding:0;
	padding-left:27px;

	li.list-group-item {

		margin-bottom:25px;

		list-style-image: url( "../images/li-check.png" );

		color: #1c1c1b;
		font-size: 1.25rem;

		span {

			font-size: 0.87rem;

		}

		&.list-group-item-disable {

			list-style-image: url( "../images/li-x.png" );

			color: #5c5c5c;

		}

	}

}
/* FIN - LIST-GROUP */

:root {

	#prices { --items: 4; }
	#prices-options { --items: 3; }

}

@media(max-width: 992px) {


	:root {

		#prices, #prices-options { --items: 2; }

	}

}

@media(max-width: 768px) {

	:root {

		#prices, #prices-options { --items: 2; }

	}

}

@media(max-width: 576px) {

	:root {

		#prices, #prices-options { --items: 1; }

	}

}

.cards_navigation {

			position: relative;
			overflow: hidden;

			.cards_navigation-next, .cards_navigation-prev {

				height: 100%;

				position: absolute;

				border: none;

				display: block;

				top:0;

				z-index: 1000;


			}

			.cards_navigation-next {

				right:0;

			}

			.cards_navigation-prev {

				left:0px;

			}

			.cards_navigation-next::before, .cards_navigation-prev::before  {

				font-family: "bootstrap-icons";

				color: rgba(92, 92, 92, 0.1);

				font-size:200px;

				position: absolute;
				top:calc(50% - 100px);

				@media( max-width: 576px ) {
					font-size: 100px;
					top:calc(50% - 50px);
				}

			}

			.cards_navigation-next::before {

				content: "\F133";
				right: -40px;

				@media( max-width: 576px ) { right: -20px; }

			}

			.cards_navigation-prev::before {

				content: "\F129";
				left: -40px;

				@media( max-width: 576px ) { left: -20px; }

			}

		}

/* Cards */
.cards {

	&.cards-carrousel {

		&.cards-carrousel::-webkit-scrollbar {
 
			display: none;

		}


		display: flex;
		--gap: 1rem;
		gap: var(--gap);

		overflow-x: auto;

		padding: calc( var(--gap) * .5 );
		/*margin: calc( var(--gap) * .5 );*/

		scroll-snap-type: x mandatory;
		scroll-padding-inline: calc( var( --gap ) * 2 );

	}

	.card {

		min-width: calc( (100% - (var( --items ) - 1 ) * var( --gap ) ) / var( --items ) );
		scroll-snap-align: start;

		background-color: #fff;

		height: 100%;
		box-sizing: border-box;
		
		-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
		box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);

		-webkit-border-radius: 10px;
		border-radius: 10px;

		padding: 25px 20px	;

		display: flex;
		flex-direction: column; /* Colonne pour empiler les éléments */
		justify-content: space-between; /* Contenu et footer sont espacés */

		.card-title {

			border-bottom: 2px solid #eee;
			padding: 0 0 20px 27px;

			h5 {

				font-size: 2rem;
				color: #1c1c1b;
				margin:0;

				span {

					font-size:1.25rem;

				}

			}

			h6 {

				font-size: 1.25rem;
				color: #5c5c5c;
				margin:0;

			}

		}

		.card-body {

			margin-top:15px;
			flex-grow: 1;


			p {

				font-size: 1.25rem;
				padding-left:27px;

			}

			p.title {

				color: #5c5c5c;

			}

			p.contenu {

				color: #a49ca4;

			}

		}

		.card-footer {

			margin-top:15px;

		}

	}

}

/* LANDING  */
section.landing {

	background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, transparent 50%) #fdfdfd;
	
	/*padding-top: 130px;*/

	text-align: center;

	.landing-content {

		padding: 0 0 40px 0;

	}

	@media( max-width: 992px ) {

		.landing-content {
			margin: 40px 0;
			padding: 0 40px;
		}

	}

	p {


		line-height: 1.8rem;

	}

	img {

		margin: 0;
		padding: 0;
	}

	.landing-logo {

		margin: 0 auto 80px auto;

		width: 100%;
		max-width: 302px;

		@media( max-width: 576px ) {
			max-width: 200px;
			margin: 0 auto 40px auto;
		}

	}

	.landing-img {

		width: 100%;
		max-width: 468px;

		@media( max-width: 576px ) {
			max-width: 75%;
		}

	}

}
/* FIN - LANDING  */

/* PRICES  */
section.prices {

	background: linear-gradient(to top, #e3e3e3 50%, transparent 50%);
	/*padding: 70px 0 20px 0;*/

}
/* FIN - LANDING */


/* CONTACT  */
section.contact {

	/*padding: 70px 0 0 0;*/

	form {

		.row {

			margin-bottom:20px;

		}

		.form-floating {

			position: relative;

			input:focus, input:valid, 
			textarea:focus, textarea:valid {
				padding-top:40px;
			}

			input:focus + label, input:valid + label, 
			textarea:focus + label, textarea:valid + label {

				top:10px;
				font-size: 1.2rem;
				color: #666;

			}


			label {

				position: absolute;
				top :20px; left:32px;

				font-size: 1.5rem;

				pointer-events: none;

				transition : .1s ease-in-out;

			}

		}

	}

	input, textarea {

		font-family: Calibri !important;
		font-size: 1.5rem !important;

		box-sizing: border-box;

		border:none;

		-webkit-border-radius: 10px;
		border-radius: 10px;

		-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);

		width: 100%;

		padding: 20px;


		&:focus {

			border: none;
			outline:  none;

			-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.4);
			box-shadow: 0 0 15px 0 rgba(0,0,0,0.4);

		}


	}

	input {

		height: 75px;

	}

	textarea {

		height: 200px;
		resize: none;

	}

	@media (max-width: 992px) { 

		.contact-infos {

			margin-top: 40px;

		}

	}

	@media (max-width: 768px) { 

		div.form-floating:has( #name ) {

			margin-bottom:20px;

		}

	}

	@media (max-width: 576px) { 

		input:focus + label, input:valid + label, 
		textarea:focus + label, textarea:valid + label {

			left: 28px;

		}

		input {

			height: auto;
			transition: .1s ease;

		}

	}

}
/* FIN - LANDING */

/* FAQ */
section.faq {

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 1.4rem;
  transition: transform 0.3s;
}

.faq-question.open::after {
  content: "−";
}

.faq-answer {
  display: none;
  padding: 0 20px 20px 20px;
  color: #555;
  line-height: 1.5;
  font-size: 1rem;
}


}
/* FIN - FAQ */

/* FOOTER */
footer {

	p { text-align:center; font-size: 1rem;  }
	a { color:inherit; text-decoration:none;  }

}
/* FIN - FOOTER */

/* COOKIES */
#cookie-banner {

	background: #5c5c5c;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	color: #fff;
	padding: 15px;
	text-align: center;
	z-index: 1000;
	font-size: 14px;

	button {

		margin-left: 10px;
		padding: 5px 10px;
		cursor: pointer;

	}

}
/* FIN - COOKIES */