footer, .box-footer, .box-footer-alt {display: none;}
#header {background: transparent;}

/* Animation Introduction */

.animation-intro {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
  }
#animation {
	width: auto;
  max-width: 92vw;
  min-height: calc(100vh - 50px);
  }
@media (max-width:700px) {
	#animation {
		transform: scale(0.85);
	  }
}
@media (max-width:500px) {
	#animation {
		transform: scale(1);
	  }
	}
#Logo{
	transform: rotateY(90deg);
	transform-origin: center;
  }
.rotate-logo-intro {
	  -webkit-animation: rotate-logo-intro 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
			  animation: rotate-logo-intro 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  }
@-webkit-keyframes rotate-logo-intro {
	0% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
	100% {
	  -webkit-transform: rotateY(360deg);
			  transform: rotateY(360deg);
	}
}
@keyframes rotate-logo-intro {
	0% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
	100% {
	  -webkit-transform: rotateY(360deg);
			  transform: rotateY(360deg);
	}
}
.text-web {
	stroke-dashoffset: 500px;
	stroke-dasharray: 500px;
	filter: drop-shadow(none);
  }

.agence-1, .agence-2, .agence-3, .agence-4, .agence-5, .agence-6, .agence-7, .agence-8, .agence-9 {
	position: absolute;
	opacity: 0; /* Les lettres sont invisibles au départ */
	transition: opacity 1s, transform 1s;
	transform-origin: center;
  }
.agence-2 {
	transform: translate(-4.5%, 0%);
  }
.agence-3 {
	transform: translate(-8%, 0%);
  }
.agence-4 {
	transform: translate(-12%, 0%);
  }
.agence-5 {
	transform: translate(-16%, 0%);
  }
.agence-6 {
	transform: translate(-20%, 0%);
  }
.agence-7 {
	transform: translate(-26%, 0%);
  }
.agence-8 {
	transform: translate(-30%, 0%);
  }
.agence-9 {
	transform: translate(-34.5%, 0%);
  }
.text-agence .animate {
	transform: translate(0%, 0%);
  }
.text-agence .fade-in {
	opacity: 1;
  }
.text-agence{
		filter: drop-shadow(none);
}
/* Flêche scrolldown */
polygon, path {
    fill: #726d80;
}
.arrow-scroll {
    width: 75px;
    height: auto;
    margin: 0 2rem;
    cursor: pointer;
    overflow: visible;
	transform: rotate(-90deg);
polygon, path {
	transition: all 0.5s ease;
    }
&:hover polygon, &:hover path {
	transition: all 1s ease;
	fill: white;
    }
&:hover .arrow {
	animation: arrow-anim 2.5s ease infinite;
    }
&:hover .arrow-fixed {
	animation: arrow-fixed-anim 2.5s ease infinite;
    }
}

@keyframes arrow-anim {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	5% {
		transform: translateX(-0.1rem);
	}
	100% {
		transform: translateX(1rem);
		opacity: 0;
	}
}

@keyframes arrow-fixed-anim {
	5% {
		opacity: 0;
	}
	20% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

.scroll-down {
    display: none;
    transform: rotate(-90deg);
    opacity: 0;
    transition: 1s ease;
	position: absolute;
  	bottom: 10vh;
}

/* Pagepilling */

.pp-tableCell {
	width: 100%;
	min-height: calc(100vh - 100px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	margin-top: 100px;
}
#pp-nav span, .pp-slidesNav span {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 1px solid #726d80 !important;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
  }

#pp-nav li .active span, .pp-slidesNav .active span {
    background: #726d80;
  }

.section {
    background: #262433;
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
	width: 100vw;
	min-height: calc(100vh - 50px);
}

#section-1 .pp-tableCell {
	margin-top: 0;
}

/* Section 2*/

.circle-container {
    position: relative;
    width: 50%;
    height: 50%;
}

.circle {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: center center;
    animation: rotate 20s linear infinite;
}

.circle.paused {
    animation-play-state: paused; /* Arrête la rotation */
}

.item {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.service-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #333;
    opacity: 0;
    transition: opacity 0.3s;
}

.service-name.visible {
    opacity: 1; /* Affiche le texte */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
  to {
        transform: rotate(360deg);
    }
}

.item:nth-child(1) { transform: rotate(0deg) translate(250px) rotate(0deg); }
.item:nth-child(2) { transform: rotate(30deg) translate(250px) rotate(-30deg); }
.item:nth-child(3) { transform: rotate(60deg) translate(250px) rotate(-60deg); }
.item:nth-child(4) { transform: rotate(90deg) translate(250px) rotate(-90deg); }
.item:nth-child(5) { transform: rotate(120deg) translate(250px) rotate(-120deg); }
.item:nth-child(6) { transform: rotate(150deg) translate(250px) rotate(-150deg); }
.item:nth-child(7) { transform: rotate(180deg) translate(250px) rotate(-180deg); }
.item:nth-child(8) { transform: rotate(210deg) translate(250px) rotate(-210deg); }
.item:nth-child(9) { transform: rotate(240deg) translate(250px) rotate(-240deg); }
.item:nth-child(10) { transform: rotate(270deg) translate(250px) rotate(-270deg); }
.item:nth-child(11) { transform: rotate(300deg) translate(250px) rotate(-300deg); }
.item:nth-child(12) { transform: rotate(330deg) translate(250px) rotate(-330deg); }

/* Style 360 */

.z-text {
	transform: rotateX(-15deg);
	transition: transform 1s;
}

.text-360 {
    font-family: 'Josefin Sans', sans-serif;
	font-size: 300px;
	color: #726d80;
	text-shadow: #8c879c 2px 2px 0px;
}

.z-layer:first-child {
	color: #726d80;
}

.z-layer:not(:first-child) {
	color: #8c879c;
}

.rotate-scale-up {
	animation: rotate-scale-up 20s linear infinite both;
  }
@keyframes rotate-scale-up{
	0%{transform:scale(1) rotateZ(0)}
	24%{transform:scale(1) rotateZ(0)}
	25%{transform:scale(1.25) rotateZ(180deg)}
	35%{transform:scale(1) rotateZ(360deg)}
	75%{transform:scale(1.25) rotateZ(360deg)}
	80%{transform:scale(1) rotateZ(180deg)}
	81%{transform:scale(1) rotateZ(0)}
	100%{transform:scale(1) rotateZ(0)}
}

/* Fin style 360 */
/* Section 4*/ 

#digital-svg {
	position: absolute;
	left: 0;
	max-height: 100vh;
	max-width: 90vw;
}

 svg .svg-elem-1 {
	stroke-dashoffset: 544.6077880859375px;
	stroke-dasharray: 544.6077880859375px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-1 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-2 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-2 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-3 {
	stroke-dashoffset: 496.52008056640625px;
	stroke-dasharray: 496.52008056640625px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-3 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-4 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-4 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-5 {
	stroke-dashoffset: 462.52777099609375px;
	stroke-dasharray: 462.52777099609375px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-5 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-6 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-6 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-7 {
	stroke-dashoffset: 441.1048278808594px;
	stroke-dasharray: 441.1048278808594px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-7 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-8 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-8 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-9 {
	stroke-dashoffset: 293.8360595703125px;
	stroke-dasharray: 293.8360595703125px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-9 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-10 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-10 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-11 {
	stroke-dashoffset: 283.72210693359375px;
	stroke-dasharray: 283.72210693359375px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-11 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-12 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-12 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-13 {
	stroke-dashoffset: 381.2491149902344px;
	stroke-dasharray: 381.2491149902344px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-13 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-14 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-14 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-15 {
	stroke-dashoffset: 222.26510620117188px;
	stroke-dasharray: 222.26510620117188px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-15 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-16 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-16 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-17 {
	stroke-dashoffset: 381.2491455078125px;
	stroke-dasharray: 381.2491455078125px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-17 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-18 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-18 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-19 {
	stroke-dashoffset: 279.2691650390625px;
	stroke-dasharray: 279.2691650390625px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-19 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-20 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-20 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-21 {
	stroke-dashoffset: 283.6927185058594px;
	stroke-dasharray: 283.6927185058594px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-21 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-22 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-22 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-23 {
	stroke-dashoffset: 479.2078552246094px;
	stroke-dasharray: 479.2078552246094px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-23 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-24 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-24 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-25 {
	stroke-dashoffset: 453.2462158203125px;
	stroke-dasharray: 453.2462158203125px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-25 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-26 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-26 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-27 {
	stroke-dashoffset: 336.998046875px;
	stroke-dasharray: 336.998046875px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-27 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-28 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-28 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-29 {
	stroke-dashoffset: 263.07086181640625px;
	stroke-dasharray: 263.07086181640625px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-29 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-30 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-30 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-31 {
	stroke-dashoffset: 222.2650909423828px;
	stroke-dasharray: 222.2650909423828px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-31 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-32 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-32 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-33 {
	stroke-dashoffset: 229.7151336669922px;
	stroke-dasharray: 229.7151336669922px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-33 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-34 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-34 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-35 {
	stroke-dashoffset: 278.57196044921875px;
	stroke-dasharray: 278.57196044921875px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-35 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-36 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-36 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-37 {
	stroke-dashoffset: 473.6755676269531px;
	stroke-dasharray: 473.6755676269531px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-37 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-38 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-38 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-39 {
	stroke-dashoffset: 336.9686584472656px;
	stroke-dasharray: 336.9686584472656px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-39 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-40 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-40 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-41 {
	stroke-dashoffset: 263.07080078125px;
	stroke-dasharray: 263.07080078125px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-41 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-42 {
	stroke-dashoffset: 15.823007675795091px;
	stroke-dasharray: 15.823007675795091px;
	fill: transparent;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-42 {
	stroke-dashoffset: 0;
	fill: #726d80;
  }
svg .svg-elem-43 {
	stroke-dashoffset: 465.5279846191406px;
	stroke-dasharray: 465.5279846191406px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
svg.active .svg-elem-43 {
	stroke-dashoffset: 0;
  }
svg .svg-elem-44 {
	stroke-dashoffset: 18.964600329384883px;
	stroke-dasharray: 18.964600329384883px;
	-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
						  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
				  fill 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
svg.active .svg-elem-44 {
	stroke-dashoffset: 0;
  }

  .blink-2 {
	-webkit-animation: blink-2 5s infinite both;
	        animation: blink-2 5s infinite both;
}

@-webkit-keyframes blink-2 {
	0% {
	  opacity: 1;
	}
	10% {
	  opacity: 0.35;
	}
	25% {
		opacity: 0.75;
	}
	40% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
	60% {
		opacity: 0.8;
	}
	75% {
		opacity: 0.35;
	}
	90% {
		opacity: 0.5;
	}
	100% {
	  opacity: 1;
	}
}
@keyframes blink-2 {
	0% {
		opacity: 1;
	  }
	  10% {
		opacity: 0.35;
	  }
	  25% {
		  opacity: 0.75;
	  }
	  40% {
		  opacity: 0.35;
	  }
	  50% {
		  opacity: 1;
	  }
	  60% {
		  opacity: 0.8;
	  }
	  75% {
		  opacity: 0.35;
	  }
	  90% {
		  opacity: 0.5;
	  }
	  100% {
		opacity: 1;
	  }
}

  .blink-1 {
	-webkit-animation: blink-1 5s infinite both;
	        animation: blink-1 5s infinite both;
}

@-webkit-keyframes blink-1 {
	0% {
	opacity: 1;
	}
	10% {
	opacity: 0.75;
	}
	25% {
	opacity: 1;
	}
	40% {
	opacity: 0.75;
	}
	50% {
	opacity: 0.2;
	}
	60% {
	opacity: 0.35;
	}
	75% {
	opacity: 0.85;
	}
	90% {
	opacity: 0.95;
	}
	100% {
	opacity: 1;
	}
}
@keyframes blink-1 {
	0% {
	opacity: 1;
	}
	10% {
	opacity: 0.75;
	}
	25% {
	opacity: 1;
	}
	40% {
	opacity: 0.75;
	}
	50% {
	opacity: 0.2;
	}
	60% {
	opacity: 0.35;
	}
	75% {
	opacity: 0.85;
	}
	90% {
	opacity: 0.95;
	}
	100% {
	opacity: 1;
	}
}
/* Fin section 4 */
/* Section 5 */ 

:root{
  --caroussel-index-width: 100vw;
  --caroussel-index-height: 100%;
  --caroussel-index-elements-displayed: 5;

  /* IMPORTANT : on remplace margin par gap */
  --caroussel-index-gap: 30px;

  /* largeur utile = 100vw - (gap * (displayed - 1)) */
  --caroussel-index-element-width: calc(
    (var(--caroussel-index-width) - (var(--caroussel-index-gap) * (var(--caroussel-index-elements-displayed) - 1)))
    / var(--caroussel-index-elements-displayed)
  );

  /* durée basée sur le nombre d'items ORIGINAUX (défini en JS dans --caroussel-index-elements) */
  --caroussel-index-animation-duration: calc(var(--caroussel-index-elements) * 3s);
}

.caroussel-index{
  width: var(--caroussel-index-width);
  height: var(--caroussel-index-height);
  background-color: #262433;
  overflow: hidden;
  position: relative;
}

.caroussel-index:before,
.caroussel-index:after{
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
  pointer-events: none;
}

.caroussel-index:before{
  left: 0;
  background: linear-gradient(to right, #262433 0%, transparent 100%);
}
.caroussel-index:after{
  right: 0;
  background: linear-gradient(to left, #262433 0%, transparent 100%);
}

.caroussel-index-content{
  list-style: none;
  height: 100%;
  display: flex;

  /* GAP au lieu des margins */
  gap: var(--caroussel-index-gap);

  /* IMPORTANT pour éviter les micro-sauts GPU */
  will-change: transform;
  transform: translate3d(0,0,0);

  animation: carousselScrolling var(--caroussel-index-animation-duration) linear infinite;
  margin: 0;
  padding: 0;

  max-height: 400px;
}

@keyframes carousselScrolling{
  0% { transform: translate3d(0,0,0); }
  100% {
    transform: translate3d(
      calc(-1 * (var(--caroussel-index-element-width) + var(--caroussel-index-gap)) * var(--caroussel-index-elements)),
      0,
      0
    );
  }
}

.caroussel-index-content li{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  width: var(--caroussel-index-element-width);
  max-height: 100%;

  /* ON SUPPRIME LES MARGES */
  margin: 0;
}

.caroussel-index-content li img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px){
  html{ font-size: 12px; }
  :root{
    --caroussel-index-height: 16vh;
    --caroussel-index-elements-displayed: 3;
    --caroussel-index-gap: 18px;
  }
  .caroussel-index:before,
  .caroussel-index:after{ width: 5rem; }
}


/* Fin section 5 */
/* Section 6 */
/* Fin section 6 */   

/* ===== WE rotating words (Section 3) ===== */
.we-dynamic {
	overflow: hidden;
}
#section-3 .we-hero{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:calc(100vh - 50px);
  gap:60px;
  position: relative;
}

#section-3 .we-fixed{
  position: absolute;
  align-items:center;
  justify-content:center;
  font-size:500px;
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1;
  font-family: Serona;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #726d80;
}

#section-3 .we-dynamic{
  position: absolute;
  align-items:center;
  justify-content:center;
  perspective:900px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#section-3 .we-word{
  position:relative;
  min-width:12ch;
  height:1.4em;
  display:block;
  font-size:125px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
  font-family: Arkhip;
  transform-origin:center;
  will-change:transform, opacity;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

#section-3 .we-face{
  position:absolute;
  inset:0;
  white-space:nowrap;
}
#section-3 .we-face-b{
  display:none;
}

@media (max-width: 1000px){


  #section-3 .we-fixed{
    font-size: 400px;
    letter-spacing: -0.03em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
  }

  #section-3 .we-word{
    font-size: 100px;
    width: 100%;
    height: 1.25em;
    text-align: center;
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  #section-3 .we-face{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 768px){
  #section-3 .we-hero{
    height: 50vh;
    gap: 20px;
    padding: 12vh 16px 20vh;
	min-height: inherit;
  }

  #section-3 .we-fixed{
    font-size: clamp(160px, 42vw, 260px);
    letter-spacing: -0.03em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
  }

  #section-3 .we-dynamic{
    perspective: 700px;
  }

  #section-3 .we-word{
    font-size: clamp(42px, 10vw, 72px);
    width: 100%;
    height: 1.25em;
    text-align: center;
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  #section-3 .we-face{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 420px){
  #section-3 .we-hero{
    padding: 14vh 14px 18vh;
  }
  #section-3 .we-fixed{
    font-size: clamp(140px, 48vw, 220px);
  }
  #section-3 .we-word{
    font-size: clamp(36px, 10.5vw, 58px);
  }
}

@media (prefers-reduced-motion: reduce){
  #section-3 .we-rotate-vertical,
  #section-3 .we-rotate-vertical-reverse,
  #section-3 .we-rotate-horizontal,
  #section-3 .we-rotate-horizontal-reverse,
  #section-3 .we-rotate-diag1,
  #section-3 .we-rotate-diag1-reverse,
  #section-3 .we-rotate-diag2,
  #section-3 .we-rotate-diag2-reverse{
    animation: none !important;
  }
}

/* ===================== */
/* CLASSES D’ANIMATION */
/* ===================== */

/* Vertical */
#section-3 .we-rotate-vertical{ animation:weSpinY 500ms linear infinite; }
#section-3 .we-rotate-vertical-reverse{ animation:weSpinYReverse 500ms linear infinite; }

/* Horizontal */
#section-3 .we-rotate-horizontal{ animation:weSpinX 500ms linear infinite; }
#section-3 .we-rotate-horizontal-reverse{ animation:weSpinXReverse 500ms linear infinite; }

/* Diagonales */
#section-3 .we-rotate-diag1{ animation:weSpinDiag1 500ms linear infinite; }
#section-3 .we-rotate-diag1-reverse{ animation:weSpinDiag1Reverse 500ms linear infinite; }

#section-3 .we-rotate-diag2{ animation:weSpinDiag2 500ms linear infinite; }
#section-3 .we-rotate-diag2-reverse{ animation:weSpinDiag2Reverse 500ms linear infinite; }

/* ===================== */
/* KEYFRAMES */
/* ===================== */

/* Vertical */
@keyframes weSpinY {
  0%   { transform:rotateY(0deg);   opacity:1; }
  40%  { transform:rotateY(70deg);  opacity:1; }
  50%  { transform:rotateY(90deg);  opacity:0; }
  60%  { transform:rotateY(-90deg); opacity:0; }
  100% { transform:rotateY(0deg);   opacity:1; }
}

@keyframes weSpinYReverse {
  0%   { transform:rotateY(0deg);    opacity:1; }
  40%  { transform:rotateY(-70deg);  opacity:1; }
  50%  { transform:rotateY(-90deg);  opacity:0; }
  60%  { transform:rotateY(90deg);   opacity:0; }
  100% { transform:rotateY(0deg);    opacity:1; }
}

/* Horizontal */
@keyframes weSpinX {
  0%   { transform:rotateX(0deg);   opacity:1; }
  40%  { transform:rotateX(70deg);  opacity:1; }
  50%  { transform:rotateX(90deg);  opacity:0; }
  60%  { transform:rotateX(-90deg); opacity:0; }
  100% { transform:rotateX(0deg);   opacity:1; }
}

@keyframes weSpinXReverse {
  0%   { transform:rotateX(0deg);    opacity:1; }
  40%  { transform:rotateX(-70deg);  opacity:1; }
  50%  { transform:rotateX(-90deg);  opacity:0; }
  60%  { transform:rotateX(90deg);   opacity:0; }
  100% { transform:rotateX(0deg);    opacity:1; }
}

/* Diagonale ↘ / ↖ (90° réel, fluide) + rotation sur lui-même */
@keyframes weSpinDiag1 {
  0%   { transform:rotate(0deg)     rotateY(0deg)    rotateZ(0deg);    opacity:1; }
  40%  { transform:rotate(70deg)    rotateY(70deg)  rotateZ(70deg);   opacity:1; }
  50%  { transform:rotate(90deg)    rotateY(90deg)  rotateZ(90deg);   opacity:0; }
  60%  { transform:rotate(-90deg)   rotateY(-90deg)  rotateZ(-90deg);  opacity:0; }
  100% { transform:rotate(0deg)     rotateY(0deg)  rotateZ(0deg);    opacity:1; }
}

@keyframes weSpinDiag1Reverse {
  0%   { transform:rotate(0deg)      rotateY(0deg)     rotateZ(0deg);    opacity:1; }
  40%  { transform:rotate(-70deg)    rotateY(-70deg)  rotateZ(-70deg);  opacity:1; }
  50%  { transform:rotate(-90deg)    rotateY(-90deg)  rotateZ(-90deg);  opacity:0; }
  60%  { transform:rotate(90deg)     rotateY(90deg)  rotateZ(90deg);   opacity:0; }
  100% { transform:rotate(0deg)      rotateY(0deg)  rotateZ(0deg);    opacity:1; }
}

/* ===========================
   INTRO : VIDEO + IMAGE + SVG
   =========================== */

   #section-1.animation-intro{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* vidéo */
#section-1.animation-intro .intro-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* svg */
#section-1.animation-intro svg{
  position:relative;
  z-index:2;
}

/* Ombre appliquée après animation */
.svg-fill-shadow .text-agence{
  filter: drop-shadow(4px 2px 4px black);
}


/* Le conteneur devient une "scène" empilée */
.animation-intro{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* évite les surprises de z-index */
}

/* VIDEO fond (injectée en JS) */
.animation-intro .intro-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* SVG au-dessus */
#animation{
  position: relative;
  z-index: 2;
}

/* Flèche au-dessus de tout */
.animation-intro .scroll-down{
  z-index: 3;
}

/* Disparition du groupe #Logo (sans toucher fill) */
#Logo{
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
#Logo.logo-hide{
  opacity: 0;
  transform: scale(0.98);
}


/* ===========================
   INTRO LAYERS (video + image + tint + svg)
   =========================== */

#section-1.animation-intro{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* video (injectée en JS) */
#section-1.animation-intro .intro-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* couche commune */
#section-1.animation-intro .intro-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* image (AU DESSUS de la vidéo) */
#section-1.animation-intro .intro-image{
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* desktop image */
#section-1.animation-intro .intro-image{
  background-image: url("https://webandmedias.com/wp-content/uploads/2026/02/BG-animation-intro-desktop.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* <-- hauteur 100%, largeur auto */
  min-height: 100%;
  width: 100%;
}

/* mobile image */
@media (max-width: 768px){
  #section-1.animation-intro .intro-image{
    background-image: url("https://webandmedias.com/wp-content/uploads/2026/02/BG-animation-intro-mobile.png");
    /* option si besoin sur mobile */
    background-size: cover;
  }
}

/* tint au-dessus de l'image (visible au début puis fade-out) */
#section-1.animation-intro .intro-tint{
  z-index: 2;
  background: #262433;
  opacity: 0;
  transition: opacity 800ms ease;
}
#section-1.animation-intro .intro-tint.is-visible{
  opacity: 1;
}

/* SVG au-dessus */
#section-1.animation-intro #animation{
  position: relative;
  z-index: 3;
}

/* Drop-shadow après dessin (appliqué aux éléments fill) */
#animation.svg-fill-shadow .text-agence{
  filter: drop-shadow(4px 2px 4px black);
}

/* Si tu veux aussi l'ombre sur les tracés + fills des .text-web une fois remplis */
#animation.svg-fill-shadow .text-web{
  filter: drop-shadow(4px 2px 4px black);
}
/* état initial : pas d'ombre */
#animation{
  filter: none;
}

/* on applique le drop-shadow quand la classe est là */
#animation.svg-shadow-on{
  filter: drop-shadow(4px 2px 4px black);
}

/* on fade via une opacité de "couche" (fiable) */
#animation.svg-shadow-fade{
  opacity: 1;               /* le SVG reste visible */
  transition: none;         /* on gère l'opacité d'une couche dédiée */
}

/* couche de fade (sur un wrapper) */
#section-1.animation-intro .svg-shadow-wrap{
  position: relative;
  z-index: 3; /* même niveau que ton SVG */
}

#section-1.animation-intro .svg-shadow-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0;
  transition: opacity 500ms ease;
}

/* quand on active le fade, on monte l'opacité */
#section-1.animation-intro .svg-shadow-wrap.shadow-fading::after{
  opacity: 1;
}

#animation{
  --sh: 0; /* 0 -> 1 */
  filter: drop-shadow(calc(4px * var(--sh)) calc(2px * var(--sh)) calc(4px * var(--sh)) rgba(0,0,0,1));
}

/* scène plein écran */
#section-1.animation-intro{
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* le SVG ne doit pas pousser le layout */
#section-1.animation-intro #animation{
  display: block;
}

/* flèche positionnée en bas, au-dessus de tout */
#section-1.animation-intro .scroll-down{
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  z-index: 8000;
  display: initial;  /* ou block selon ton style */
  opacity: 0;        /* ton JS la fait passer à 1 */
  pointer-events: auto;
}