header {
      height: 100vh;
      background-image: url('../src/imgs/bgHeader.png');
      background-size: cover;
      background-position: center;
      position: relative;
}
header::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2a2a2ae5;
      backdrop-filter: blur(2px);
}
header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../src/imgs/headerGrid/cerclesHeader.png');
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 5;
}
#headerVid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
}
.headerContent {
      z-index: 10;
      width: 50%;
}
.abeille {
      width: 50px;
      position: absolute;
      left: 3%;
      top: 50%;
      transform: translate(0, -50%);
      transition: all 0.3s ease;
}
.abeille:hover {
      filter: brightness(1) grayscale(1);
      transform: rotate(30deg) translate(0, -50%);
}
.headerColG {
      width: 38%;
}
.headerColD {
      width: 60%;
}
.headerColD {
      display: flex;
      justify-content: flex-end;
}

header .fakeTitle {
      font-size: 2.5rem !important;
}

.mobileHeaderText {
      display: none;
      padding-top: 100px;
}

.headerLink:hover {
      text-decoration: underline;
}

/* --------------------------------- BUTTON --------------------------------- */

header .buttonContainer {
      width: 250px;
}
header .plusSymbolContainer {
      width: 20%;
}

/* ---------------------------------- GRID ---------------------------------- */

.headerGridContainer {
      gap: 5px;
}
.headerGridContainer .bgImg1 {
      background-image: url('../src/imgs/headerGrid/1.png');
      background-position: center;
      background-size: cover;
      width: 60%;
}
.headerGridContainer .bgImg2 {
      background-image: url('../src/imgs/headerGrid/2.png');
      background-position: center;
      background-size: cover;
      width: 20%;
}
.headerGridContainer .bgImg3 {
      background-image: url('../src/imgs/headerGrid/3.png');
      background-position: center;
      background-size: cover;
      width: 20%;
}
.gridImgContainer {
      border-radius: 10px;
      height: 300px;
      transition: all 0.3s ease;
}
.bgImgActive {
      width: 100% !important;
}

/* --------------------------------- ARTICLE -------------------------------- */

.articleContainer {
      background-color: var(--buttonBackground);
      padding: 10px;
      border-radius: 10px;
}
.articleBtn .buttonContainer {
      background-color: var(--inputBackground);
      width: 200px;
}
.articleContainer .imgFleche {
      transform: rotate(-90deg);
      margin-right: 10px;
      width: 15px;
}

/* ------------------------------ SCROLL ARROW ------------------------------ */
.arrowLink {
      z-index: 995;
}

.scrollArrow {
      position: absolute;
      bottom: 5%;
      left: 50%;
      width: 30px;
      transform: translate(-50%, 0);
      cursor: pointer;
      z-index: 1;
      animation: arrowAnim 1.5s infinite ease-in-out;
}
@keyframes arrowAnim {
      0% {
            transform: translate(-50%, 0);
      }
      50% {
            transform: translate(-50%, 10px);
      }
      100% {
            transform: translate(-50%, 0);
      }
}