html {
  	scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}


body 
{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f7f4ed;
  color: #222;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}

.topBarre {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: visible;
    max-height: 100px;
    top: 0;
    left: 0;
    background-color: #f7f4ed;/*#262c4b;*/
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* ombre portée */
	z-index: 1;

}

.logo {
    display: flex;
    flex-direction: row;
    max-height: 100px;
    z-index: 2;
}

.logo img{
    height: 150px;
    background-color: #f7f4ed;
    box-shadow: 0 8px 16px rgba(0, 0.4, 0.4, 0.4); /* ombre portée */
	  z-index: 1;
    cursor: pointer;
}

.Top {
    width: 100%;
    height: auto;
}

.Top img {
    width: 100%;       /* prend toute la largeur */
    height: 500px;     /* hauteur fixe souhaitée */
    object-fit: cover; /* adapte l’image sans déformation, recadre si besoin */
    display: block;    /* enlève l’espace blanc sous l’image */
}

.Liste {
    display: flex;
    font-size: 1.5em;
    color: #262c4b;
    gap: 1rem;
	margin: 1em;
    padding: 10px;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
}

.activite {
    display: flex;
    position: absolute;
    left: 50%;
	max-height: 200px;
	width: 100%;
    transform: translateX(-50%);
    top: 100px;
    font-size: 1.5em;
    color: #ffffff;
    gap: 1rem;
    list-style: none;
    padding: 1em;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

#about img {
    height: 500px;
    width: auto;
    border-radius: 50px;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  flex-direction: column;
}

#lightbox.hidden {
  display: none;
}

.lightbox-content {
  background: #ffffff00;
  padding: 1rem;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  position: relative;
}

#galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#galerie img {
	width: 250px;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	cursor: zoom-in;
	box-shadow: 4px 9px 11px rgba(0, 0.4, 0.4, 0.4);
  	transition: transform 0.3s;
}
#galerie img:hover {
  transform: scale(1.05);
}

.close-btn {
    font-size: 3rem;
    cursor: pointer;
    color: #f7f4ed;
    width: 50px;
	height: 50px;
    text-align: center;
    line-height: 36px;
    transition: background-color 0.3s ease;

}

.close-btn:hover {
	color: #8b4513;
}

.close-btn:active {
	transform: scale(0.8);
}

.footer {
  text-align: center;
  padding: 1em;
  background-color: #262c4b;
  color: white;
  font-size: 0.9em;
}

.footer a {
  color: #ffffff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
  color: #cccccc;
}

.Liste a {
	text-decoration: none;         /* Supprime le soulignement */
  	color: #262c4b;                /* Couleur de texte par défaut */
  	transition: color 0.3s ease;
}

.Liste a:hover {
	color: #b3812f;
}

.activite li::after {
  content: " - ";
}

.activite li:last-child::after {
  content: "";
}

#about {
    display: flex;
    gap: 3em;
    padding: 2em 2em;
    background-color: #f7f4ed;
    color: #222;
    max-width: 1000px;
    margin: 0 auto;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

#about h2,
#galery h2,
#mentions-legales h2 {
  font-size: 2em;
  color: #262c4b;
  margin-bottom: 1em;
  text-align: center;
}

#galery h2 {
  margin-bottom: 0;
}

.nom-entreprise,
#mentions-legales h3 {
  color: #8b4513; /* couleur personnalisée pour le nom de l'entreprise */
}

#about p,
#mentions-legales p {
  font-size: 1.1em;
  color: #262c4b;
  margin-bottom: 1em;
}

#about strong {
	color: #8b4513;
}


.carousel {
	--items: 5;
	--carousel-duration: 30s;
	@media (width > 600px) {
		--carousel-duration: 30s;
	}
	--carousel-width: min(
		80vw,
		1200px
	); /* note - it will "break" if it gets too wide and there aren't enough items */
	--carousel-item-width: 280px;
	--carousel-item-height: 470px;
	--carousel-item-gap: 2rem;

	--clr-cta: rgb(139, 69, 19);

	position: relative;
	width: var(--carousel-width);
		height: var(--carousel-item-height);
		overflow: clip;

		&[mask] {
			/* fade out on sides */
			mask-image: linear-gradient(
				to right,
				transparent,
				black 10% 90%,
				transparent
			);
		}

		&[reverse] > article {
			animation-direction: reverse;
		}
		/* hover pauses animation */
		&:hover > article {
			animation-play-state: paused;
		}
}
	.carousel > article {
		position: absolute;
		top: 0;
		left: calc(100% + var(--carousel-item-gap));
		width: var(--carousel-item-width);
		height: 450px;
		display: grid;
		grid-template-rows: 200px auto 1fr auto;
		gap: 0.25rem;
		border: 1px solid light-dark(rgba(0 0 0 / 0.25), rgba(255 255 255 / 0.15));

		padding-block-end: 1rem;
		border-radius: 10px;
		background: light-dark(white, rgba(255 255 255 / 0.05));
		color: light-dark(rgb(49, 65, 88), white);

		/* animation */
		will-change: transform;
		animation-name: marquee;
		animation-duration: var(--carousel-duration);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-delay: calc(
			var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
		);
		&:nth-child(1) {
			--i: 0;
		}
		&:nth-child(2) {
			--i: 1;
		}
		&:nth-child(3) {
			--i: 2;
		}
		&:nth-child(4) {
			--i: 3;
		}
        &:nth-child(5) {
			--i: 3;
		}
}

#galery {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

#galery p {
	font-size: 1.1em;
  	margin-bottom: 1em;
  	line-height: 1.6;
}
	.carousel img {
		width: 100%;
		height: 100%;
		object-fit: cover;

		border-radius: 10px 10px 0 0;
	}
	.carousel > article > *:not(img) {
		padding: 0 1rem;
	}
	.carousel > article > div {
		grid-row: span 2;
		display: grid;
		position:relative;
		grid-template-rows: subgrid;
		font-size: 0.8rem;
	}
	.carousel > article h2 {
		font-size: 1.2rem;
		font-weight: 300;
		padding-block: 0.75rem 0.25rem;
		margin: 0;
	}
	.carousel > article p {
		margin: 0;
	}
	.carousel > article a {
		text-decoration: none;
		position: fixed;
    	bottom: 10px;
    	left: 10px;
		text-transform: lowercase;
		border: 1px solid var(--clr-cta);
		color: light-dark(var(--clr-cta), white);
		border-radius: 3px;
		padding: 0.25rem 0.5rem;
		place-self: start;
		transition: 150ms ease-in-out;
		&:hover,
		&:focus-visible {
			background-color: var(--clr-cta);
			color: white;
			outline: none;
		}
	}

	@keyframes marquee {
		100% {
			transform: translateX(
				calc(
					(var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) *
						-1
				)
			);
		}
	}


.contact {
	display: flex;
  background-color: #f7f4ed;
  padding: 3em 1em;
  text-align: center;
  color: #262c4b;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap-reverse;
}

.contact img {
	width: 300px;
}

.contact h2 {
  font-size: 2em;
  margin-bottom: 1em;
}

.contact-info p {
  margin: 0.5em 0;
  font-size: 1.1em;
}

.contact a {
  color: #262c4b;
  text-decoration: none;
}

.contact a:hover {
  text-decoration: underline;
}

.social-links {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  gap: 1.5em;
}

.social-links img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

.social-links img:hover {
  transform: scale(1.2);
}

@media screen and (max-width: 768px) {
    .Top img {
        height: 250px; /* image moins haute sur mobile */

    }

	#about {
		flex-wrap: wrap-reverse;
	}

	.topBarre {
		max-height: 80px;
	}

	.logo img {
		height: 110px;
	}

	.Liste {
		font-size: 1em;
	}


    .activite {
        font-size: 1em;
		top: 80px;
        gap: 0.5rem;
        padding: 1rem;
		max-height: 200px;
    }
}

/* Responsive : très petits écrans */
@media screen and (max-width: 480px) {
    .Top img {
        height: 170px;
    }

  .Liste {
    font-size: 1em;
  }

  #about {
		flex-wrap: wrap-reverse;
	}

  #about img {
    height: 400px;
  }


	.logo img {
		height: 100px;
	}

    .activite {
        font-size: 0.8em;
		  top: 80px;
		  max-height: 80px;
    }
}