.stats-container{
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
	/*gap: 30px;                              espace entre les blocs */
	justify-items: center;   /* centre les items dans chaque colonne */
}

.block-stats{
	/*background-color: #e4ddd4;*/
	width: 250px;
	height: 150px;
	border-radius: 50px;
	font-weight: bold;
	color: #403d42;
	text-align: center;
	background: #e4ddd4;
	border-radius: 16px;
	margin-top: 50px;
}

.block-stats-title{
	margin-top: 30px;
	display: block;
	font-size: 44px;
}

.block-stats-undertitle{
	margin-top: 0px;
	display: block;
	font-size: 20px;
}

#work-with-us-container li{
	list-style-type: disc;
	font-family: "Poppins";
	font-size: 16px;
	margin-bottom: 30px;
}

.img-demo{
	border-radius: 50px;
	width: 60%
}

.knowlege-title{
	font-family: "Hammersmith One";
	font-weight: 400;
	font-size: 20px;
}

#block-contact{
	font-family: "Poppins";
	font-size: 16px;
	background-color: #e4ddd4;
	padding: 30px;
	padding-left: 60px;
	padding-right: 60px;
	width: 50%;
	margin: auto;
	text-align: center;
	border-radius: 50px;
}

.elementor-widget-container {
  min-height: 100vh !important;
  aspect-ratio: 16/9 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.elementor-widget-container video {
  border: none;
  line-height: 1;
  margin: 0;
  max-width: 100%;
  width: 100%;
height: 100vh;        /* hauteur maximum de la fenêtre */
  object-fit: cover;    /* recadre la vidéo sans déformation */
}

#navbar.navbar-video{
	padding: 16px 64px;
}

.navbar-video #navbar-container{
	border-radius: 12px;
	padding-left: 10px;
}

.navbar-video .navbar-content{
	border-radius: 12px;
}

#block-text-video{
	margin-top: -820px;
	color: white;
}
#block-text-video h1{
	color: white !important;
}

#block-text-video h2,#block-text-video .subtitle,#block-text-video  .italic-block{
	color: white !important;
}

#content-container{
	margin-top: -130px;
}

#flex-btn-contact{
	display: flex;
	gap: 30px;
	justify-content: center;
}





.titre-avec-fleches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #b59a78;
  letter-spacing: 0.05em;
}

.texte {
  color: #b59a78;
  font-size: 1.1rem;
}

/* Flèches animées */
.fleche {
  animation: flecheMove 1.8s ease-in-out infinite;
}

/* Animation gauche/droite */
.fleche.gauche {
  animation-name: flecheMoveGauche;
}

.fleche.droite {
  animation-name: flecheMoveDroite;
}

@keyframes flecheMoveGauche {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

@keyframes flecheMoveDroite {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* Optionnel : adoucit la couleur sur hover */
.titre-avec-fleches:hover .fleche path {
  stroke: #a68b6a;
}

/* Switcher step-by-step : pause 3s, glisse vers le haut, pas de redescente */
.switcher{
  --line: 2.5em;        /* hauteur d'une ligne (adapter à ta typo) */
  --count: 8;           /* nombre d'éléments UNIQUES */
  --pause: 3s;          /* temps de pause sur chaque ligne */
  --slide: .35s;        /* durée du glissement entre lignes */
  display: inline-block;
  height: var(--line);
  line-height: var(--line);
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
}

.switcher .items{
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* Durée d’un cycle = (pause + slide) * count */
  animation: switchText calc((var(--pause) + var(--slide)) * var(--count)) linear infinite;
}

.switcher .items span{
	font-family: "Hammersmith One";
	font-weight: 400;
	font-size: 27px;
}

/* Conteneur de la colonne d’images */
.sites-photos {
    max-width: 554px;        /* largeur du bloc images */
    padding-left: 0px;      /* espace pour les macarons à gauche */
    margin: 0 auto;          /* centre le bloc dans la colonne */
}

/* Chaque image principale */
.site-card {
    position: relative;      /* les logos se positionnent par rapport à ce bloc */
    margin-bottom: 15px;
}
.site-card:hover {
    transform: scale(1.02);
}

.site-photo {
    display: block;
    width: 100%;
    border-radius: 15px;     /* coins arrondis comme sur le mock */
}

/* Macarons */
.site-logo {
    position: absolute;
    left: 0;
    transform: translateX(-50%); /* la moitié sort à gauche de la photo */
    width: 115px;                 /* taille du macaron à ajuster */
    z-index: 2;
}

/* Positions verticales des macarons */
.logo-top  { top: 20px; }     /* vert */
.logo-mid  { top: 140px; }    /* violet */
.logo-agm  { top: 20px; }     /* bleu sur 2e photo */

/* Légende sous la 3e image */
.site-card figcaption {
    margin-top: 5px;
    font-style: italic;
    text-align: left;
	font-family: "Poppins";
	font-size: 16px;
	color: #403d42;
}

.checklist{
    list-style: none;
    padding: 0;
    margin: 0;
}
.checklist li{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .25rem 0;
  line-height: 1.35;
}
.checklist li::before{
  content: "✓";
  flex: 0 0 auto;
}
#hero{
	background: #ffffff;
}

/* Keyframes pour 8 items : pause longue puis court glissement à chaque cran.
   La fin atteint -8*line (début de la liste dupliquée) => boucle sans “retour”. */
@keyframes switchText{
  /* item 0 visible */
  0%,      11.194% { transform: translateY(0); }
  12.5%             { transform: translateY(calc(-1 * var(--line))); }

  /* item 1 visible */
  12.5%,   23.694% { transform: translateY(calc(-1 * var(--line))); }
  25%               { transform: translateY(calc(-2 * var(--line))); }

  /* item 2 */
  25%,     36.194% { transform: translateY(calc(-2 * var(--line))); }
  37.5%            { transform: translateY(calc(-3 * var(--line))); }

  /* item 3 */
  37.5%,   48.694% { transform: translateY(calc(-3 * var(--line))); }
  50%               { transform: translateY(calc(-4 * var(--line))); }

  /* item 4 */
  50%,     61.194% { transform: translateY(calc(-4 * var(--line))); }
  62.5%            { transform: translateY(calc(-5 * var(--line))); }

  /* item 5 */
  62.5%,   73.694% { transform: translateY(calc(-5 * var(--line))); }
  75%               { transform: translateY(calc(-6 * var(--line))); }

  /* item 6 */
  75%,     86.194% { transform: translateY(calc(-6 * var(--line))); }
  87.5%            { transform: translateY(calc(-7 * var(--line))); }

  /* item 7 */
  87.5%,   98.694% { transform: translateY(calc(-7 * var(--line))); }
  100%             { transform: translateY(calc(-8 * var(--line))); } /* arrive au début de la liste dupliquée */
}

@media(max-width:1760px) {
	#block-text-video{
		margin-top: -650px;
	}
	.mt-50-l{
		margin-top: 50px;
	}
}
@media (min-width: 992px) and (max-width: 1250px) {
	.block-work{
		width: auto;
	}
	.block-work p{
		font-size: 15px;
	}
	.block-work i{
		font-size: 13px;
	}
	#block-text-video .col-md-8{
		width: 100%;
	}
}
@media(max-width:992px) {
	#work-with-us-container .col-md-4{
		margin-bottom: 20px;
	}
	#navbar.navbar-video{
		padding: 0;
	}
	#block-stats-container{
		margin-top: 785px;
	}
}

@media(max-width:780px) {
	.img-demo{
		border-radius: 16px;
	}
	#block-stats-container{
		margin-top: 600px;
	}

	.stats-container{
		margin-left: -19px;
	}

	.block-stats{
		width: 150px;
		height: 90px;
		margin-top: 20px;
	}

	.block-stats-title{
		margin-top: 20px;
		font-size: 18px;
	}

	.block-stats-undertitle{
		font-size: 12px;
	}

	#block-text-video{
		width: 100%;
		margin-top: -650px;
	}
	h1{
		font-size: 20px;
	}
	.wd-550{
		width: 100%;
	}
	.mt-100-s{
		margin-top: 1100px;
	}
	.site-logo {
		width: 100px;                 /* taille du macaron à ajuster */
	}
}

@media(max-width:480px) {
	.block-stats{
		width: 100px;
		height: 60px;
	}

	.block-stats-title{
		margin-top: 0;
		font-size: 16px;
	}

	.block-stats-undertitle{
		font-size: 12px;
	}

	#block-text-video{
		width: 100%;
		margin-top: -650px;
	}
	h1{
		font-size: 20px;
	}
	.wd-550{
		width: 100%;
	}
	.mt-100-s{
		margin-top: 1100px;
	}
	#work-with-us-container .block-work{
		width: 100%;
		padding: 5px;
	}
	.site-logo {
		width: 80px;                 /* taille du macaron à ajuster */
	}
	.logo-mid  { top: 100px; }    /* violet */
}

@media(max-width:420px) {
	.site-logo {
		width: 40px;                 /* taille du macaron à ajuster */
	}
	.logo-mid  { top: 60px; }    /* violet */
}