html {
   scroll-behavior: smooth;
}

body {
   background-color: #0a0a0a;
   margin: 0;
   font-family: "Montserrat", sans-serif;
   color: white;
}

@media (min-width: 1024px) {

/*===| SCROLL |===*/
::-webkit-scrollbar {
   width: 3px;
}

::-webkit-scrollbar-track {
   background: #00000000;
}

::-webkit-scrollbar-thumb {
   background: #b3b3b3;
   border-radius: none;
   border: 0px solid #0a0a0a;
}

::-webkit-scrollbar-thumb:hover {
   background: #b3b3b3;
}

/*===| img-between |===*/
.img-between {
   width: 100%;
}

.img-between {
   position: relative;
   background-image: url(./img/img-between/img-between-1.png);
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 250px;
   overflow: hidden;
   filter: grayscale(100%);
}

.img-between-2 {
   position: relative;
   background-image: url(./img/img-between/img-between-2.png);
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 280px;
   margin-bottom: 35px;
   overflow: hidden;
   filter: grayscale(100%);
}

.img-between-degrader {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background:
      radial-gradient(circle at 20% 0%, #0a0a0acb, transparent 40%),
      radial-gradient(circle at 80% 0%, #0a0a0a93, transparent 50%),
      linear-gradient(to bottom, #0a0a0a 0%, transparent 40%, transparent 60%, #0a0a0a 100%);
   z-index: 1;
   pointer-events: none;
}

/*==========| HEADER |==========*/

/* Desktop ≥ 1024px */
header {
   position: fixed;
   width: 100%;
   z-index: 1000000000;
   transition: background-color 0.2s ease;
   background-color: transparent;
}

header.scrolled {
   background-color: rgba(0, 0, 0, 0.123);
   backdrop-filter: blur(6px);
}

header nav {
   padding: 4px 14px 4px 20px;
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

header nav ul {
   padding: 0;
   margin: 0;
   height: 4vh;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   list-style: none;
}

header nav ul li {
   font-size: 11px;
   font-weight: 100;
   margin: 0;
}

header nav ul li a {
   color: white;
   text-decoration: none;
}

header nav .main-nav li {
   margin-right: 24px;
   transition: margin-right 0.2s ease;
}

header nav .main-nav.compact li {
   margin-right: 18px;
}

/*===| soulignie-dynamique |===*/
li.soulignie-dynamique {
   position: relative;
   display: inline-block;
   cursor: pointer;
}

li.soulignie-dynamique::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 100%;
   height: 1px;
   background-color: rgb(233, 233, 233);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.2s ease-out;
}

li.soulignie-dynamique:hover::after {
   transform: scaleX(1);
}

/*===| button-join |===*/
.button-join {
   position: relative;
   display: inline-block;
   padding: 3px 44px;
   font-size: 10px;
   letter-spacing: 3px;
   font-family: "Montserrat", sans-serif;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   border: 2px solid #7A2E2E;
   overflow: hidden;
   border-radius: 6px;
   font-weight: 800;
   z-index: 0;
   transition: all 0.2s ease;
   background-color: transparent;
}

.button-join::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background: #7A2E2E;
   z-index: -1;
   transition: width 0.2s ease;
}

.button-join:hover::before {
   width: 100%;
}

.button-join:hover {
   color: #fff;
   border: 2px solid #e2e2e2;
}

.button-join.big {
   padding: 3px 48px;
   letter-spacing: 5px;
   transition: all 0.2s ease;
}


/*==========| language-selector |==========*/
.lang-switch-bottom-right {
  position: fixed;   
  bottom: 16px;     
  right: 16px;       
  display: flex;
  flex-direction: column; 
  gap: 7px;          
  z-index: 1000;
}

.lang-btn {
  padding: 5px 7px;
  border: 2px solid #fff;
  background-color: transparent;
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.2s;
  text-align: center;
}

.lang-btn:hover {
  background-color: rgba(255, 255, 255, 0.099);
}

.lang-btn.active {
  background-color: #7A2E2E;
}

/*==========| MAIN |==========*/
main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.titre-section {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: 36px;
   font-weight: bold;
   padding: 0;
   margin: 0;
   text-transform: uppercase;
   color: #fff;
}

.underline-img {
   padding: 0;
   margin: 0;
   width: 120px;
   height: auto;
}


/*==========| section-first-view |==========*/
main .box-section-first-view {
   width: 100%;
   background-image: url("img/textures/texture-1.png");
   background-repeat: no-repeat;
   background-size: cover;
   margin: 0 auto;
}

main .section-first-view {
   height: 80vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

.title-wrapper {
   position: relative;
   display: inline-block;
}

.bg-block {
   position: absolute;
   top: 0;
   left: 0;
   width: 57px;
   height: 100%;
   background-color: #6C1E1E;
   z-index: 0;
}

.section-first-view .img-h1 {
   margin: 10px 0 16px 16px;
   width: 420px;
}

.box-text {
   position: relative;
   z-index: 1;
   padding-left: 6px;
}

.section-first-view .slogan {
   margin: 13px 0 0 15px;
   font-size: 18px;
   font-weight: 900;
   letter-spacing: 2.5px;
   font-family: "Montserrat", sans-serif;
   color: #BBB8B0;
}

.section-first-view .sous-h1 {
   border-left: 2px solid rgb(184, 184, 184);
   color: #d2d0cc;
   padding-left: 24px;
   font-size: 14px;
   letter-spacing: 0.8px;
   margin-top: 20px;
}

.section-first-view .box-img {
   display: inline-block;
}

.section-first-view .logo {
   width: 420px;
   margin-left: 0px;
   padding-left: 50px;
}


/*==========| section-history |==========*/
.box-section-history {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 70px;
   width: 100%;
   padding: 50px 0 80px 0;
   background-color: #0a0a0a;
   font-family: sans-serif;
   color: #ffffff;
}

.box-image img {
   width: 220px;
   transition: opacity 0.3s ease-in-out;
}

.box-text {
   max-width: 640px;
   font-family: "Montserrat", sans-serif;
   text-align: justify;
}

.box-text h2 {
   font-size: 36px;
   margin-bottom: 20px;
   letter-spacing: 1px;
}

.box-text p {
   font-size: 16px;
   line-height: 1.6;
   margin: 0 0 6px 0;
}

.txt-red {
   text-decoration: underline;
   text-decoration-color: #7A2E2E;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
}

.text-700 {
   font-weight: 700;
}


/*==========| section-occupy |==========*/
.box-section-commitments {
   padding: 80px 0 100px 0;
}

.box-section-commitments h2 {
   font-size: 36px;
   margin: 0 0 26px 0;
   font-weight: bold;
}

.commitments-cards {
   display: flex;
   gap: 30px;
   flex-wrap: wrap;
}

.commitments-card {
   width: 330px;
   text-align: center;
}

.commitments-card .image {
   width: 100%;
   height: 400px;
   background-size: cover;
   background-position: center;
   clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
   transition: filter 0.4s ease;
   filter: grayscale(100%);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.commitments-card:hover .image {
   filter: grayscale(0%);
}

.commitments-card h3 {
   margin: 10px 0 0 33px;
   text-align: left;
   font-weight: bold;
   font-size: 18px;
   text-transform: uppercase;
   text-decoration: underline;
   text-decoration-color: #7A2E2E;
   text-underline-offset: 5px;
   text-decoration-thickness: 3px
}

.commitments-card-1 .image {
   position: relative;
   width: 100%;
   height: 400px;
   overflow: hidden;
}

.commitments-card-1 .bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   transition: opacity 0.4s ease;
}

.commitments-card-1 .bg.default {
   opacity: 1;
   z-index: 1;
}

.commitments-card-1 .bg.hover {
   opacity: 0;
   z-index: 2;
}

.commitments-card-1:hover .bg.hover {
   opacity: 1;
}

.commitments-card-1:hover .bg.default {
   opacity: 0;
}


/*==========| section-commander |==========*/
.box-section-commander {
   width: 100%;
   height: 470px;
   background-color: #0a0a0a;
   padding: 50px 0 0 0;
   z-index: 9;
}

.section-commander {
   width: fit-content;
   margin: 0 auto;
   padding: 0 30px;
   text-align: center;
}

.section-commander .grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 50px;
   transform: translateY(0px);
   margin-top: 14px;
   z-index: 990;
}

.box-commander {
   display: flex;
   flex-direction: column;
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.box-commander.animate {
   animation: commanderFadeUp 0.8s ease-out forwards;
}

.box-commander:nth-child(1).animate {
   animation-delay: 0.1s;
}

.box-commander:nth-child(2).animate {
   animation-delay: 0.3s;
}

.box-commander:nth-child(3).animate {
   animation-delay: 0.5s;
}

@keyframes commanderFadeUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.box-commander img {
   width: 230px;
   border-bottom: 4px solid #6C1E1E;
}

.box-commander .box-texte-commander {
   padding: 20px 30px;
   text-align: start;
   background-color: rgb(32, 32, 32);
}

.box-commander .box-texte-commander h3 {
   padding: 0;
   margin: 0 0 6px 0;
}

.box-commander .box-texte-commander p {
   padding: 0;
   margin: 0;
   font-size: 10px;
   letter-spacing: 3px;
}

/*==========| section-gallery |==========*/
.box-section-gallery {
   width: 100%;
   text-align: center;
   padding: 120px 0 80px 0;
   background-image: url("img/textures/texture-2.png");
   background-repeat: no-repeat;
   background-size: cover;
}

.section-gallery {
   width: 900px;
   margin: 0 auto;
}

.grid-gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;
   margin-top: 14px;
}

.grid-gallery img {
   width: 100%;
   height: auto;
   filter: grayscale(100%);
   transition: transform 0.3s ease, filter 0.3s ease;
   cursor: pointer;
}

.grid-gallery img:hover {
   filter: grayscale(0%);
   transform: scale(1.02);
}
}

/*===| media-mobile |===*/
@media (max-width: 767px) {
   body {
      display: none;
   }
}


/*==========| Footer |==========*/
footer p {
   font-size: 11px;
   text-align: center;
}