* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  /*box-shadow: 0 0 0 3px red inset;*/
  font-family: Montserrat, sans-serif;
  /*scroll-behavior: smooth;*/
}
/*******  CRÉATION DES VARIABLES  POUR LES COULEURS ******/
:root {
  --backgroundCube1: #d3d3d3;
  --backgroundCube2: #063c76;
  --backgroundCube3: #8e8e8e;
  --backgroundCube4: #777777;
}
body {
  min-height: 100vh;
  background-color: #f2f2f2;
  overflow-x: hidden;
}
/* Réinitialisation des boutons pour les diférents navigateurs */
button,
input[type="submit"],
input[type="button"] {
  all: unset;
  appearance: none;
}
/***********    HEADER CONTAINER    ****/
header {
  max-width: 100vw; /* Evite le debordement*/
  width: 100%;
  height: 360px;
  position: relative;
  display: flex;
  background-color: var(--backgroundCube2);
}
.container__header {
  width: 100%;
  height: 300px;
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  background-color: var(--backgroundCube2);
}
.container__3D {
  width: 450px;
  max-width: 100vw;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube1);
}

.content__3D {
  width: 450px;
  height: 300px;
  position: relative;
  top: 0;
  left: 0;
  background: url(Assets/svg/BtoYou-Lettrage\ noir\ seul\ header\ V2.2.svg);
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 1400px;
  z-index: 90;
}
.container__3D__cubes {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 89;
}
/*******    CUBE VIOLET     ****/
.cube {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 105px;
  left: 108px;
  transform-style: preserve-3d;
  transform: translateZ(-50px) rotateX(-30deg) rotateY(-53deg);
  /*animation-duration: 20s linear;*/
  animation: rotate-cube 10s infinite linear;
}
.face {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  color: white;
  font-size: 2rem;
}
.face.front {
  background-color: var(--backgroundCube2);
  transform: translateZ(40px);
}
.font-to {
  transform: rotate(45deg) skewX(-5deg);
}
.face.back {
  background-color: var(--backgroundCube2);
  transform: translateZ(-40px);
}
.face.right {
  background-color: var(--backgroundCube2);
  transform: translateX(40px) rotateY(90deg);
}
.face.left {
  background-color: var(--backgroundCube2);
  transform: translateX(-40px) rotateY(-90deg);
}
.face.top {
  background-color: var(--backgroundCube2);
  transform: translateY(-40px) rotateX(90deg);
}
.face.bottom {
  background-color: var(--backgroundCube2);
  transform: translateY(40px) rotateX(-90deg);
}
/****   ANIMATION ROTATION CUBE VIOLET ****/
@keyframes rotate-cube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
/*******    CUBE TWO    ****/
.cube-two {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 200px;
  left: 195px;
  transform-style: preserve-3d;
  transform: translateZ(-50px) rotateX(-45deg) rotateY(-53deg);
  /*animation: rotate-cube 10s infinite;*/
}
.cube2 {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  color: white;
  font-size: 3rem;
  background-color: var(--backgroundCube3);
}
.cube2.front {
  background-color: var(--backgroundCube3);
  transform: translateZ(30px);
}
.cube2.back {
  background-color: var(--backgroundCube3);
  transform: translateZ(-30px);
}
.cube2.left {
  background-color: var(--backgroundCube3);
  transform: translateX(-30px) rotateY(90deg);
}
.cube2.right {
  background-color: var(--backgroundCube3);
  transform: translateX(30px) rotateY(90deg);
}
.cube2.top {
  background-color: var(--backgroundCube2);
  transform: translateY(-30px) rotateX(90deg);
}
.cube2.bottom {
  background-color: var(--backgroundCube3);
  transform: translateY(30px) rotateX(90deg);
}
/*******    CUBE THREE      ****/
.cube-three {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 204px;
  left: 55px;
  background-color: var(--backgroundCube4);
  transform-style: preserve-3d;
  transform: translateZ(-25px) rotateX(312deg) rotateY(-25deg);
}
.cube3 {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: var(--backgroundCube4);
  border: 1px solid white;
}
.cube3.front {
  background-color: var(--backgroundCube2);
  transform: translateZ(20px);
}
.cube3.back {
  background-color: var(--backgroundCube4);
  transform: translateZ(-20px);
}
.cube3.left {
  background-color: var(--backgroundCube4);
  transform: translateX(-20px) rotateY(90deg);
}
.cube3.right {
  background-color: var(--backgroundCube4);
  transform: translateX(20px) rotateY(90deg);
}
.cube3.top {
  background-color: var(--backgroundCube4);
  transform: translateY(-20px) rotateX(90deg);
}
.cube3.bottom {
  background-color: var(--backgroundCube4);
  transform: translateY(20px) rotateX(-90deg);
}
/*******    CUBE FOUR      ****/
.cube-four {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  left: 60px;
  transform-style: preserve-3d;
  transform: translateZ(30px) rotateX(30deg) rotateY(30deg);
  background-color: var(--backgroundCube1);
}
.cube4 {
  width: 50px;
  height: 50px;
  position: absolute;
  border: 1px solid white;
}
.cube4.front {
  background-color: var(--backgroundCube1);
  transform: translateZ(-25px);
}
.cube4.back {
  background-color: var(--backgroundCube1);
  transform: translateZ(25px);
}
.cube4.left {
  background-color: var(--backgroundCube2);
  transform: translateX(-25px) rotateY(90deg);
}
.cube4.right {
  background-color: var(--backgroundCube1);
  transform: translateX(25px) rotateY(-90deg);
}
.cube4.top {
  background-color: var(--backgroundCube1);
  transform: translateY(-25px) rotateX(90deg);
}
.cube4.bottom {
  background-color: var(--backgroundCube1);
  transform: translateY(25px) rotateX(-90deg);
}
/**********   CONTAINER SLIDE HEADER    ****/
.container__slider {
  width: 574px;
  height: 300px;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-around;
  flex-direction: column;
}
.slider__texts__header {
  width: 574px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-left: 10px;
}
/*****  SLIDER TEXTS HEADER    ****/
.text__header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 10px;
  transition: 1.8s ease-in-out;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-100%);
}
.text__header.active__text {
  visibility: visible;
  opacity: 1;
  transform: translateX(0%);
  transform: scale(1, 1.6);
  color: white;
}
.text__header h2 {
  text-transform: uppercase;
  font-size: clamp(0.5rem, 10vh, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.4rem;
  color: #f2f2f2;
}
.text__header p {
  letter-spacing: 0.1rem;
  color: #f2f2f2;
}

/*****  SLIDER IMAGES HEADER    ****/
.slider__images__header {
  width: 500px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.image__header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding-left: 10px;
  transition: 1.8s ease-in-out;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
}
.slide__img.active__image {
  visibility: visible;
  opacity: 1;
  transform: translateX(0%);
}
/**************   MAIN-WRAPPER  *******/
.main-wrapper {
  max-width: 1480px; /* Largeur max sur grands écrans */
  margin: 0 auto; /* Centre horizontalement */
  width: 100%; /* Pour être fluide en dessous de 1200px*/
  /* padding: 0 1rem; Espace sur les côtés (utile pour petits écrans) */
}

/**************   NAV BAR  *******/

nav.navbar {
  position: fixed;
  top: 300px;
  left: 0px;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube3);
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform 0.4s ease,
    top 0.4s ease,
    box-shadow 0.3s ease,
    opacity 0.4s ease;
}
/* Etat scorll de la navbar */
nav.navbar.active {
  transform: translateY(0);
  top: 0;
  z-index: 99;
  opacity: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.content-nav-bar {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
}
/*************  CONTAINER BURGER    ********/
.container-burger {
  width: 50%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
}
.content-burger {
  width: 80px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0px 10px;
  cursor: pointer;
}
.burger-content {
  width: 75px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 5px;
}
.burger {
  width: 35px;
  height: 2px;
  position: relative;
  background-color: var(--backgroundCube1);
  border: none;
  transition: 0.4s ease-in-out;
}
.burger.top {
  width: 35px;
  height: 2px;
  display: block;
  border: none;
  transform: translateY(-10px);
}
.burger.middle {
  width: 35px;
  height: 2px;
  display: block;
  border: none;
}
.burger.bottom {
  width: 35px;
  height: 2px;
  display: block;
  border: none;
  transform: translateY(10px);
}
.burger.top.open {
  transform: translateY(4px) rotate(135deg);
  transition: 0.4s ease-out;
}
.burger.middle.open {
  opacity: 0;
  transition: 0.4s ease-out;
}
.burger.bottom.open {
  transform: translateY(1px) rotate(-135deg);
  transition: 0.4s ease-out;
}

.title-burger {
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-nav-logo {
  width: 150px;
  height: 100%;
}
.content-logo {
  width: 150px;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: url(Assets/svg/logo\ BtoYou_Entier-blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 34px;
}
.container-home-svg {
  width: 100px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
  color: black;
  transition: color 1.5s ease-in-out;
}
.icon-home {
  width: 30px;
  height: 30px;
}

/************** NAV SIDE BAR    ***********/
.container-nav-side {
  width: 300px;
  position: absolute;
  top: 95px;
  left: 0px;
  transform: translateX(-300px);
  transition: 0.5s ease-in-out;
}
.container-nav-side.open-side {
  transform: translateX(0px);
}
.container-nav-side > ul {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube2);
}
.container-nav-side > ul > li {
  width: 100%;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 200;
}
.container-nav-side > ul > li > a {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  text-align: left;
  color: var(--backgroundCube1);
  padding-left: 5px;
  transition: 1s;
}
.container-nav-side > ul > li > a:hover {
  background-color: var(--backgroundCube3);
  /*transition: 0.4s;*/
}

/************** SECTIONS PARALLAXS  *******/
section {
  width: 100%;
  height: 400px;
}
h1 {
  font-size: 60px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}
.parallax-1 {
  width: 100%;
  background-image: url("Assets/investment.jpg");
  background-size: cover;
  background-repeat: no-repeat; /* Empêche la répétition de l'image */
  background-position: center;
  background-attachment: fixed;
}
/* Correction en cours */
.parallax-2 {
  background-image: url("Assets/sailboat-1049747_1920.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 400px; /* important si tu veux un vrai repère */
  overflow: hidden; /* évite de voir le titre sortir du bloc */
}
/* .parallax-2 {
  background-image: url("Assets/sailboat-1049747_1920.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
} */
.parallax-3 {
  height: 300px;
  background-image: url("Assets/analysis.jpg");
  background-size: cover;
  background-repeat: no-repeat; /* Empêche la répétition de l'image */
  background-position: center;
  background-attachment: fixed;
}
.parallax-4 {
  height: 340px;
  background-image: url("Assets/loupe.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
/* .parallax-5{
    background: url(Assets/digital-marketing.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
} */
.parallax-6 {
  width: 100%;
  height: 400px;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.parallax-6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("Assets/clock-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  /* filter: blur(1px); */
}
.parallax-7 {
  height: 350px;
  background-image: url("Assets/confiance.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
.parallax-8 {
  height: 320px;
  background-image: url("Assets/application-letter-v2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
/* Correction encours */
.parallax-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-section-2 h1 {
  font-size: 60px;
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: 5px 1px 0px rgba(255, 253, 253, 1);
  text-align: center;
  transition: 1.2s ease-in-out;
  transform: scaleX(0.5);
  /* color: rgba(255, 255, 255, 0.4); */
}

.inner-section-2.added h1 {
  transform: scaleX(1);
  color: var(--backgroundCube2);
  /* background-color: var(--backgroundCube1); */
  padding: 10px;
}

.main-title-parallax-2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: var(--backgroundCube1); */
  opacity: 0;
  transform: translateY(0px);
  transition:
    transform 1s ease-out,
    opacity 0.8s ease-out 0.2s; /* Délais*/
}

.main-title-parallax-2.show-title {
  opacity: 1;
}
.inner-section-3 h1 {
  font-size: 70px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: 1.2s ease-out;
  transform: translateX(-1090px);
  transition:
    transform 1s ease-out,
    opacity 0.8s ease-out;
  padding: 10px 15px;
}
.inner-section-3.added h1 {
  transform: translate(0px);
  text-shadow: 5px 1px 0px rgba(255, 253, 253, 1);
  color: var(--backgroundCube2);
  backdrop-filter: blur(5px);
  opacity: 1;
}

.main-title-parallax-4 {
  width: 100%;
  overflow: hidden;
  padding: 1rem 2rem;
}

.inner-section-4 h1 {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: 1.2s ease-out;
  transition:
    transform 1s ease-out,
    opacity 0.8s ease-out;
  transform: scaleX(0.5);
  color: var(--backgroundCube2);
}
.inner-section-4.added h1 {
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  opacity: 1;
  transform: scaleX(1);
  padding: 10px;
  /* color: white; */
  /* text-shadow: 3px 1px 0px rgba(0, 0, 0, 0.8); */
  text-shadow: 3px 1px 0px rgba(255, 253, 253, 0.8);
}
.main-title-parallax-7 {
  width: 100%;
  /* background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;

  /* Masque radial pour adoucir le blur vers l'extérieur */
  /* mask-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  ); */
  /* -webkit-mask-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  );  */
  padding: 1rem 2rem;
  /* border-radius: 10px; */
  color: white;
}
.inner-section-7 h1 {
  font-size: 60px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  transition: 0.5s ease;
  color: white;
  text-shadow: 7px 1px 4px rgba(0, 0, 0, 0.8);
  transform: scaleX(0.5);
  visibility: hidden;
  opacity: 0;
}
.inner-section-7.added h1 {
  transform: scaleX(1);
  padding: 10px;
  visibility: visible;
  opacity: 1;
}
.inner-section-8 {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.inner-section-8 h1 {
  font-size: 60px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 7px 1px 4px rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  transition: 0.7s ease-in-out;
  opacity: 0;
}
.inner-section-8 h1.visible {
  opacity: 1;
  letter-spacing: 20px;
}
h2 {
  font-size: 32px;
  color: #555;
  text-align: center;
  font-weight: 300;
  letter-spacing: 2px;
  margin: 20px 0 10px;
}

.illustration-container {
  width: 200px;
  height: 350px;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--backgroundCube1);
  border-radius: 5px;
}
.title-container {
  width: 100%;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backgroundCube3);
  color: var(--backgroundCube1);
  text-transform: uppercase;
}
.title-container h3 {
  font-size: 14px;
  font-weight: 500;
}
.text-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  font-weight: 300;
  padding: 5px;
}
/**********     ARTICLE EXPERTISE   *****/
.inner-1 {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.inner-1 h1 {
  margin-top: 1.5rem;
  font-size: 60px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.inner-1 h2 {
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
#about-us {
  background-image: url(Assets/talking.png);
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1.2s ease-in-out;
}
#values-us {
  width: 470px;
  height: 390px;
  position: relative;
  font-weight: 200;
  color: black;
  transition: transform 1.3s;
}
#values-us h4 {
  font-size: 19px;
  font-weight: 200;
}

.photo-bb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 345px;
  left: 150px;
  transform: translate(50%, -50%);
  background-image: url(Assets/portraitBB.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#customers-us {
  border-radius: 5px;
  background-image: url(Assets/handels.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
/**********     ARTICLE NOS VALEURS ET APPROCHES   *****/

#section-2.loaded {
  color: #694087;
}

.inner-section-2 h1 {
  padding: 5px;
}
.container-article {
  width: 100%;
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube2);
}
.content-article {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  padding: 0px 10px;
  margin: 15px 0px;
}
.article {
  padding-bottom: 15px;
}
.article h4 {
  font-size: 1rem;
  font-weight: 300;
  color: white;
  margin-bottom: 10px;
}
.article p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  color: white;
}
.subtitle-nos-valeurs {
  width: 100%;
  min-height: 155px;
  display: flex;
  position: relative;
  align-items: start;
  justify-content: center;
  background-color: var(--backgroundCube3);
  margin: 20px 10px;
}
.subtitle-nos-valeurs h4 {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 2.5rem;
  color: var(--backgroundCube1);
  padding: 8px;
}
/**********     AUDIT ET CONSEILS   *****/

.container-parallax-3 {
  width: 100%;
  height: 550px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: var(--backgroundCube2);
}
.content-introduction {
  width: 100%;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--backgroundCube1);
  padding: 15px 10px;
}
.content-introduction h3 {
  color: var(--backgroundCube2);
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.9rem;
}
.content-introduction p {
  color: var(--backgroundCube2);
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.5rem;
}

.main-content-audit {
  width: 100%;
  height: 350px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.content-audit,
.content-request {
  width: 400px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  background-color: var(--backgroundCube2);
  padding: 4px;
}
.content-audit h3 {
  color: var(--backgroundCube1);
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.9rem;
}
.content-audit p {
  color: var(--backgroundCube1);
  font-size: 1rem;
  font-weight: 200;
  padding: 4px;
}
/********   CONTAINER REQUEST   ************/
.content-request {
  justify-content: space-around;
  border: none;
}
.audit-content:not(:last-child)::before {
  content: "";
  width: 4px;
  position: absolute;
  left: calc(-3.5rem - 4px);
  top: 2.5rem;
  bottom: -3.3rem;
  background-color: var(--backgroundCube1);
  /*z-index: 1;*/
}
.audit-content {
  position: relative;
  justify-content: space-around;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  cursor: pointer;
  transition: var(--backgroundCube1) 0.3s ease-in-out;
}

.audit-content h5 {
  color: var(--backgroundCube1);
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.9rem;
}
.audit-content p {
  color: var(--backgroundCube1);
  font-size: 1rem;
  font-weight: 200;
}
.audit-content .lettre {
  content: "";
  width: 2.5rem;
  display: flex;
  position: absolute;
  top: 6px;
  left: -78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--backgroundCube3);
  color: var(--backgroundCube1);
  aspect-ratio: 1;
}
/**********     RECRUTEMENT  & ACCOMPAGNEMENT   *****/
.container-parallax-4 {
  width: 100%;
  height: 420px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube2);
}
.content-parallax-4 {
  width: 290px;
  height: 340px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  background-color: var(--backgroundCube1);
  border-radius: 5px;
  padding: 8px;
}
.content-approche-4 {
  width: 340px;
  height: 365px;
}
.content-evaluation-4 {
  width: 300px;
  height: 365px;
}
.content-accompagnement-4 {
  width: 340px;
  height: 365px;
}
.deco-line-container {
  width: 95%;
  height: 2px;
  background-color: var(--backgroundCube2);
  margin: 10px 0 10px 0;
}
.content-parallax-4 h4 {
  text-transform: uppercase;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
}
.content-parallax-4 p {
  font-size: 1.1rem;
  font-weight: 200;
  padding: 5px;
}
/**********     TEMPS PARTAGE   ************/

.timeshare-container {
  width: 100%;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*transition: 0.6s ease-in-out;*/
}
.box-title-one,
.box-title-two {
  width: 320px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
}
.box-title-one {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--backgroundCube2);
}
.box-title-one.added {
  transform: translateX(-320px);
  opacity: 1;
}
.box-title-two {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  background-color: var(--backgroundCube4);
}
.box-title-two.added {
  transform: translateX(320px);
  opacity: 1;
}
.text-paraph-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  margin-top: 27px;
}
.text-paraph-title {
  margin-top: 30px;
}
.text-paraph-title h2 {
  color: var(--backgroundCube2);
  /* color: white; */
  font-weight: 600;
  text-shadow: 3px 0px 0px rgba(254, 251, 251, 0.9);
  text-transform: uppercase;
}
.container-parallax-6 {
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube2);
}

.text-parallax-6 {
  width: 290px;
  height: 420px;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  border-radius: 5px;
}
.text-parallax-6 h2 {
  color: white;
}
.text-parallax-6 h4 {
  font-size: 1.2rem;
  font-weight: 200;
  color: white;
}
.text-parallax-6 p {
  font-size: 1rem;
  font-weight: 200;
  color: white;
}
.btn-contact-entreprise {
  width: auto;
  height: 40px;
  border-radius: 5px;
  padding: 0.5rem;
  border: 2px solid var(--backgroundCube1);
  text-align: center;
  color: var(--backgroundCube1);
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.btn-contact-entreprise:hover {
  background-color: var(--backgroundCube1);
  color: var(--backgroundCube2);
}
.container-parallax-6-image {
  width: 400px;
  height: 290px;
  position: relative;
  overflow: hidden;
}
.container-parallax-6-image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
}
.container-parallax-6-image .image-team {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  border: 2px solid var(--backgroundCube1);
  overflow: hidden;
  transition: 1.5s ease-in-out;
}
.container-parallax-6-image .image-team span {
  width: 25%;
  height: 100%;
  background-image: url(Assets/team.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.6s ease-in-out;
  transform: translateY(0%);
}
.container-parallax-6-image .image-team span:nth-child(1) {
  background-position: 0%;
  transition-delay: 0s;
}
.container-parallax-6-image .image-team span:nth-child(2) {
  background-position: 30.33%;
  transition-delay: 0.1s;
}
.container-parallax-6-image .image-team span:nth-child(3) {
  background-position: 60.66%;
  transition-delay: 0.2s;
}
.container-parallax-6-image .image-team span:nth-child(4) {
  background-position: 90.99%;
  transition-delay: 0.3s;
}

.container-parallax-6-image .image-team > span.show-team {
  transform: translateY(100%);
}
.content-btoyou {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  transform: translateY(30px);
  opacity: 0;
  transition:
    transform 1.2s ease,
    opacity 1.2s ease;
}

.content-btoyou.show-content-btoyou {
  transform: translateY(0);
  opacity: 1;
}
.content-btoyou h4 {
  color: white;
  font-size: 1.9rem;
  font-weight: 200;
}
.content-btoyou p {
  color: white;
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.2rem;
  padding: 8px;
}

.content-btoyou.hidden-content-btoyou {
  transform: translateY(-100%);
  transition: 1.1s;
  transition-delay: 0.1s;
  opacity: 0;
}
/*********************************************************************/
/******   ANIMATION SUR TITRE CONTAINER MODIFICATION QUESTION  *******/
/*********************************************************************/
.dots span {
  display: inline-block; /* Important pour transform*/
  opacity: 0;
  animation: blink 1.4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* Décalage temporel */
.dots span:nth-child(1) {
  animation-delay: 0s;
}
.dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  10% {
    opacity: 0;
    transform: scale(1.2);
  }
  20% {
    opacity: 1;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
/***************** CLIENTS & TÉMOIGNAGES    *******/
.container-parallax-7 {
  width: 100%;
  height: 550px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube2);
}
.container-illustration-clients {
  width: 385px;
  overflow: hidden;
  position: relative;
}
.photos-container {
  height: 200px;
  display: flex;
  flex-direction: row;
  width: max-content;
  background-color: white;
  animation: slideLogos 20s linear infinite;
}
.photo-client {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-client {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.deco-line-logos {
  width: 2px;
  height: 100px;
  align-self: center;
  background-color: var(--backgroundCube2);
}
.photo-client:nth-child(1) .img-client {
  animation-delay: 0s;
}
.photo-client:nth-child(3) .img-client {
  animation-delay: 0.2s;
}
.photo-client:nth-child(5) .img-client {
  animation-delay: 0.4s;
}
.container-comment-logos {
  width: 100%;
  height: 140px;
  align-items: start;
  padding: 10px 5px;
  background-color: var(--backgroundCube1);
}
.container-comment-logos p {
  font-size: 1rem;
  font-weight: 200;
}
.container-contact-us {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 5px;
  margin-top: 10px;
  background-color: var(--backgroundCube1);
}
.container-contact-us a {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 200;
  color: black;
}
/* Animation slider logos clients */
@keyframes slideLogos {
  0% {
    transform: translateX(-50%);
  }
}
/* Animation cliquez ici */
.container-click {
  display: flex;
  gap: 5px;
  padding-left: 5px;
}
.card {
  width: 25px;
  height: 25px;
  perspective: 500px;
  /* animation: flip 3s infinite; */
}
.inner-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: flip 3s infinite;
  transition: transform 0.6s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.card:nth-child(2) .inner-card {
  animation-delay: 0.2s;
}
.card:nth-child(3) .inner-card {
  animation-delay: 0.4s;
}
.card:nth-child(4) .inner-card {
  animation-delay: 0.6s;
}
.clique {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 300;
  text-align: center;
}
.front-card,
.back-card {
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.front-card {
  background-color: var(--backgroundCube2);
  /* color: var(--backgroundCube1); */
}
.back-card {
  transform: rotateY(180deg);
  position: relative;
  /* color: var(--backgroundCube1); */
}
@keyframes flip {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
}

.title-container-article-seven h4 {
  /*text-transform: uppercase;*/
  text-shadow: 1px 1px 1px black;
  font-size: 1.9rem;
  font-weight: 300;
}
/*************  PARTIE TESTIMONIALE    *****/
.main-container-testimoniale {
  width: 560px;
  height: 400px;
  position: relative;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}
.main-container-testimoniale h4 {
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: 0.2rem;
  color: var(--backgroundCube1);
  padding-bottom: 15px;
}
.testimonials-container {
  width: 560px;
  height: 350px;
  padding: 0px 12px;
  justify-content: center;
  background-color: var(--backgroundCube1);
  overflow: hidden;
}
.vertical-marquee {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  /* outline: 1px solid #f1f1f1; */
  position: relative;
}
.vertical-marquee__slider {
  animation: vertical-marquee 40s linear infinite;
}
@keyframes vertical-marquee {
  to {
    transform: translateY(-80%);
  }
}
.vertical-marquee__panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, (350px, 1fr));
  grid-gap: 24px;
  padding: 10px 20px;
}

.vertical-marquee__card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 2px solid var(--backgroundCube2);
  border-radius: 10px;
}
.vertical-marquee__quotes {
  color: var(--backgroundCube2);
}
.vertical-marquee__card-author {
  margin-top: 20px;
  font-style: italic;
}
.vertical-marquee__card-date {
  color: #aca9a9;
}
/**************    ESPACE JOBS     ***********/
.container-parallax-8 {
  width: 100%;
  height: 550px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--backgroundCube2);
}
.globe-nav {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /*background-color: red;*/
}
.globe {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 70%),
    #063c76;

  transition:
    background 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

/* HOVER */
.globe:hover {
  background:
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.7) 75%),
    #0a5aa3;

  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.globe > a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 200;
  font-size: 0.9rem;

  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.8),
    /* highlight */ 0 1px 0 rgba(0, 0, 0, 0.6),
    /* bord bas */ 0 2px 3px rgba(0, 0, 0, 0.7),
    /* profondeur */ 0 4px 6px rgba(0, 0, 0, 0.4); /* diffusion */
}

/***************************************************************/

/*                      PARTIE RESPONSIVE                     */

/**************************************************************/
/* === STYLES COMMUNS (s'appliquent partout) === */
/* Mets ici toutes les règles valables par défaut, non spécifiques à une largeur */

/* === MOBILE PORTRAIT (0 → 425px) === */
/* @media screen and (max-width: 425px) {
  .inner-section-2.added h1 {
    font-size: 1.4rem;
  }
} */

/* === MOBILE PORTRAIT (0 → 480px) === */
@media screen and (max-width: 480px) {
  nav.navbar {
    width: 100%;
    display: flex;
    position: fixed;
  }
  .content-nav-bar {
    display: flex;
    justify-content: space-between; /* burger ← logo → home */
    align-items: center; /* centre verticalement */
    width: 100%;
    overflow: hidden; /*Empéche l'élargissement*/
    position: relative; /*Référence pour le panneau side-bar*/
    padding: 0 10px;
  }
  .container-burger,
  a.container-home-svg {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container-burger,
  a.container-home-svg {
    width: 40px;
  }
  .container-nav-logo {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 150px; */
  }
  .container-burger {
    margin-left: 10px;
  }

  .container__3D {
    width: 100%;
  }
  .container__slider {
    display: none;
  }
  /* Ajoute ici toutes les règles spécifiques mobiles portrait */

  /*****  Article Notre Expertise */
  .inner-1 h1 {
    font-size: 1.8rem;
  }
  .inner-1 h2 {
    font-size: 1.1rem;
  }
  .container-article {
    flex-direction: column;
    height: auto;
    padding: 10px 10px;
  }
  #values-us {
    width: 400px;
    margin: 10px 10px;
  }
  /****** Nos valeurs et Approches */
  .main-title-parallax-2.show-title {
    transform: translateY(150px);
  }
  .inner-section-2.added h1 {
    font-size: 1.8rem;
  }
  .panel-articles {
    flex-direction: column;
    height: auto;
    margin: 10px 10px;
  }
  .illustration-container.definition {
    margin: 10px;
  }
  .subtitle-nos-valeurs h4 {
    font-size: 1.2rem;
  }
  /****** Audit & Conseils */
  .inner-section-3 h1 {
    font-size: 2rem;
  }
  .container-parallax-3 {
    height: auto;
  }
  .content-introduction {
    height: auto;
    margin: 10px 0px;
  }
  .content-introduction h3 {
    font-size: 1.3rem;
  }
  .main-content-audit {
    flex-direction: column;
    height: auto;
  }
  .audit-content::before {
    display: none;
  }
  .audit-content .lettre {
    display: none;
  }
  .audit-content h5 {
    font-size: 1.3rem;
    font-weight: 300;
  }
  /****** Recrutement & Accompagnement */
  .inner-section-4.added h1 {
    font-size: 1.3rem;
    transform: translateY(22px);
  }
  .container-parallax-4 {
    height: auto;
    flex-direction: column;
  }
  .content-parallax-4 {
    margin: 10px;
  }
  /****** Temps Partagé ******/
  .box-title-one,
  .box-title-two {
    width: 150px;
  }
  .box-title-one h1,
  .box-title-two h1 {
    font-size: 1.2rem;
  }
  .box-title-one.added {
    transform: translateX(-160px);
  }
  .box-title-two.added {
    transform: translateX(160px);
  }
  .text-paraph-title h2 {
    font-size: 1rem;
  }
  .container-parallax-6 {
    flex-direction: column;
    height: auto;
  }
  .container-parallax-6-image .image-team {
    border: none;
  }
  /****** Clients & Témoignages ******/
  .inner-section-7 h1 {
    font-size: 1.4rem;
  }
  .container-parallax-7 {
    flex-direction: column;
    height: auto;
  }
  .container-illustration-clients {
    margin: 15px 10px;
  }
  .main-container-testimoniale {
    width: 100%;
  }
  .main-container-testimoniale h4 {
    margin-left: 43px;
  }
  .testimonials-container {
    width: 100%;
    margin: 15px 0 15px 0;
  }
}
/* ****************************************************** */
/* === MOBILE PAYSAGE (481 → 600px) === */
/* @media screen and (min-width: 481px) and (max-width:600px){
  .co
} */

/* ****************************************************** */
/* === MOBILE PAYSAGE / PETITE TABLETTE (481 → 768px) === */

@media screen and (min-width: 481px) and (max-width: 768px) {
  nav.navbar {
    width: 100%;
  }
  .content-nav-bar {
    padding: 0 5px;
  }
  .container-burger,
  a.container-home-svg {
    flex: 0 0 50px;
  }
  .container-nav-logo {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }
  .container__3D {
    width: 100%;
  }
  .container__slider {
    overflow: hidden;
    display: none;
  }
  .slider__texts__header {
    width: 413px;
  }
  .text__header h2 {
    font-size: 20px;
    letter-spacing: 0.3rem;
  }
  .content-burger {
    padding: 0px 20px;
    margin-left: 15px;
  }
  .container-nav-side {
    z-index: 200;
  }
  /******** Article Expertise */
  .container-article {
    height: auto;
    flex-direction: column;
    padding: 8px;
  }
  #values-us {
    width: 300px;
    height: auto;
    margin: 8px;
  }
  #values-us h4 {
    font-size: 0.9rem;
  }
  .photo-bb {
    top: 374px;
    left: 160px;
    width: 40px;
    height: 40px;
  }
  /*********  Nos valeurs & Approches  ********/
  .main-title-parallax-2.show-title {
    transform: translateY(264px);
  }
  .inner-section-2.added h1 {
    font-size: 1.8rem;
  }
  .subtitle-nos-valeurs h4 {
    font-size: 1.4rem;
  }
  .article h4 {
    font-size: 1.3rem;
  }

  /*********  Audit & Conseils  ********/
  .inner-section-3.added h1 {
    font-size: 2.3rem;
  }
  .container-parallax-3 {
    height: auto;
  }
  .content-introduction {
    height: auto;
    margin: 10px;
  }
  .content-introduction h3 {
    font-size: 1.4rem;
  }
  .main-content-audit {
    height: auto;
  }
  .content-audit,
  .content-request {
    width: 370px;
  }
  .audit-content .lettre {
    top: 11px;
    left: -24px;
    width: 1.5rem;
  }
  .audit-content:not(:last-child)::before {
    left: calc(-1.9rem - -17px);
    width: 3px;
    bottom: -0.4rem;
  }
  /*********  Recrutement & Accompagnement  ********/
  .inner-section-4.added h1 {
    font-size: 1.3rem;
    padding: 10% 0;
  }
  .container-parallax-4 {
    height: auto;
    flex-direction: column;
  }
  .content-parallax-4 {
    width: 320px;
    margin: 10px;
  }
  .content-parallax-4 p {
    font-size: 0.9rem;
  }
  .content-title-para4 {
    width: 220px;
  }
  .content-title-para4 h4 {
    font-size: 1rem;
  }
  /*********  Temps Partagé  ********/
  /* parallax-section-6 */
  .text-paraph-title {
    margin-top: 50px;
  }
  .text-paraph-title h2 {
    font-size: 1.3rem;
    font-weight: 400;
  }
  .box-title-one,
  .box-title-two {
    width: 150px;
  }
  .box-title-one h1,
  .box-title-two h1 {
    font-size: 1.4rem;
  }
  .box-title-one.added {
    transform: translateX(-150px);
  }
  .box-title-two.added {
    transform: translateX(150px);
  }
  /* Container parallax-6 */
  .container-parallax-6 {
    height: auto;
    flex-direction: column;
  }
  .text-parallax-6 {
    width: 350px;
    height: auto;
    margin: 10px;
  }
  .container-parallax-6-image {
    width: 350px;
    height: auto;
    margin: 10px;
  }

  .image-team {
    visibility: hidden;
  }
  .container-parallax-6-image:hover .content-btoyou {
    transform: translateY(0%);
    visibility: visible;
    opacity: 1;
  }
  /******* Clients & Témoignages */
  .inner-section-7.added h1 {
    font-size: 1.8rem;
  }
  .container-parallax-7 {
    flex-direction: column;
    height: auto;
  }
  .container-illustration-clients {
    width: 320px;
    margin: 10px;
  }
  .container-contact-us a {
    font-size: 0.9rem;
  }
  .main-container-testimoniale,
  .testimonials-container {
    width: 425px;
    max-width: 100vw;
    margin: 10px;
  }
  /******* Espace annonces jobs */
  .globe {
    width: 80px;
    height: 80px;
    color: white;
  }
  .globe > a {
    font-size: 0.8rem;
  }
}
/********************************************************/
/* === TABLETTE (769 → 1024px) === */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container__slider {
    display: none;
  }
  nav.navbar {
    width: 100%;
    display: flex;
  }
  .content-nav-bar {
    width: 100%;
    max-width: 1024px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }
  .container-burger,
  a.container-home-svg {
    flex: 0 0 70px; /* largeur fixe (identique à gauche/droite) */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-wrapper {
    max-width: 1024px;
    display: flex;
  }
  .main-title-parallax-2.show-title {
    transform: translateY(220px);
  }
  .inner-section-2.added h1 {
    font-size: 3rem;
  }
  .illustration-container {
    width: 130px;
  }
  /****** Nos valeurs et Approches ************/
  .content-article {
    margin: 15px 0px 0px 15px;
  }
  .subtitle-nos-valeurs {
    margin: 0px 15px 0px 0px;
  }
  .article h4 {
    font-size: 1.4rem;
  }
  /****** Audit & Conseils ************/
  .content-audit,
  .content-request {
    margin: 0px 10px 0px 10px;
  }
  .audit-content:not(:last-child)::before {
    left: calc(-3.5rem - -35px);
    bottom: -3rem;
  }
  .audit-content .lettre {
    left: -40px;
  }
  .audit-content h5 {
    font-weight: 400;
  }
  /****** Recrutement & Accompagnement ************/
  .inner-section-4.added h1 {
    font-size: 2.2rem;
  }
  .container-parallax-4 {
    height: auto;
  }
  .content-parallax-4 {
    height: auto;
    margin: 10px 10px 20px 10px;
  }
  /*******  Le temps partagé   *******************/
  .text-paraph-title {
    margin-top: 97px;
  }
  .text-parallax-6 {
    height: auto;
    margin: 0px 6px 15px 6px;
  }
  /*******  Testimonials Clients   *******************/
  .inner-section-7 h1 {
    font-size: 2.5rem;
  }
  .container-parallax-7 {
    height: auto;
    flex-direction: column;
    padding: 15px 0px;
  }
}

/* === DESKTOP (1025 → 1440px) === */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .container__header {
    align-items: start;
    justify-content: left;
  }

  nav.navbar {
    width: 100%;
    display: flex;
  }
  .content-nav-bar {
    width: 100%;
    /* max-width: 1440px; */
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }
  .container-burger,
  a.container-home-svg {
    flex: 0 0 70px; /* largeur fixe (identique à gauche/droite) */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* .main-title-parallax-2.show-title {
    transform: translateY(170px);
  } */
  /* Mets ici les styles desktop standard */
}

/* === GRAND DESKTOP (>1440px) === */
@media screen and (min-width: 1441px) and (max-width: 1480px) {
  /* Mets ici les ajustements si nécessaires pour grands écrans */
  .container__header {
    align-items: start;
    justify-content: left;
  }
  nav.navbar {
    width: 100%;
    display: flex;
  }
  .content-nav-bar {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }
  .container-burger,
  a.container-home-svg {
    flex: 0 0 70px; /* largeur fixe (identique à gauche/droite) */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-title-parallax-2.show-title {
    transform: translateY(170px);
  }
}
/* === GRAND DESKTOP (>1481px) === */
@media screen and (max-width: 1520px) {
  nav.navbar {
    width: 100%;
    display: flex;
  }
  .content-nav-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .container-burger,
  .container .container-nav-logo,
  a.container-home-svg {
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}