/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
      cursor: crosshair;

}
.cursor-shape{

}

body {
  background-color: #000;
  overflow-x: hidden;
}

/* TYPO NEUE MONTREAL */
/* Neue Montreal Regular */
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/NeueMontreal/neuemontreal-regular.woff2") format("woff2"),
       url("assets/NeueMontreal/neuemontreal-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Neue Montreal Medium */
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/NeueMontreal/neuemontreal-medium.woff2") format("woff2"),
       url("assets/NeueMontreal/neuemontreal-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Image trail on mouse move */
.trail-image {
  position: fixed;
  width: 150px;
  height: 150px;
  object-fit: cover;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  mix-blend-mode: screen; /* joli sur fond sombre */
  /* border-radius: 999px;   cercle, enlève si tu veux carré */
  animation: trail-fade 0.9s ease-out both;
}

@keyframes trail-fade {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 0.40;
    transform: translate(-50%, -50%) scale(1);
  }
  105% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

body {
  font-family: "NeueMontreal", sans-serif;
  color: #f2f0f0;
}

/* HEADER */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-self: center;
  padding: 20px;
  z-index: 20;
}

.logo-link img {
  height: 40px;
}

/* HERO VIDEO */
.section-hero {
  position: relative;
  height: 100svh;
  display: block;
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-video,
.video-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-fallback {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Desktop = vidéo desktop; mobile = vidéo mobile */
.desktop-video { display: block; }
.mobile-video { display: none; }

/* ABOUT */
.section-about {
  background: #f2f0f0;
  color: #2b2b2b;
  min-height: 100svh;
  display: flex;
  align-items: center;   /* CENTRÉ VERTICAL */
  padding: 0 100px;
}

/* GRID 5 COLONNES */
.about-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  gap: 20px;
}


.col-main {
  max-width: 80vw;
  margin-right: 30px;
}

/* Texte principal */
.about-main-text {
  font-size: 0.8rem; 
  line-height: 1.20;
  text-transform: uppercase;
  /* letter-spacing: 0.03em; */
  text-align: justify;
  /* font-weight:lighter; */
  
}

/* Headers (ADDRESS, CONTACT…) */
.about-label {
  font-size: 0.8rem;
  font-weight: 550;
  /* letter-spacing: 0.16em; */
  text-transform: uppercase;
  color: #2b2b2b;
  margin-bottom: 7px;
}


/* Textes */
.about-text {
  font-size: 0.8rem;
  line-height: 1.25;
  /* letter-spacing: 0.03em; */
  text-transform: uppercase;
  /* font-weight: 450; */
}
.t-Lowcase{
      text-transform: lowercase;

}
.about-text-small {
  font-size: 0.7rem;
        margin-top: 5px;
  /* line-height: 1.55; */
  /* letter-spacing: 0.03em; */
  font-weight: 400;
}
.red-c {
  color: #b7311e;

}

.bold-t {
      font-weight: bold;

}

.fade-text {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
  /* letter-spacing: 0.2em; */
  font-size: 0.9rem;
  opacity: 0;
  animation: fadeSun 60s ease-in forwards;
  pointer-events: none;
}

@keyframes fadeSun {
  /* 0s → opacity 0% */
  8% { opacity: 0; }

  /* 25s → opacity 100% */
  28% { opacity: 1; }   /* 25s / 60s = 41.66% */

  /* 35s → opacity 100% */
  32.33% { opacity: 1; }   /* 35s / 60s = 58.33% */

  38% { opacity: 0; }

  /* 60s → opacity 0% */
  100% { opacity: 0; }
}
/* Liens */
.about-text a {
  color: #2b2b2b;
  text-decoration: none;
}

.about-text a:hover {
  opacity: 0.5;
  color: #ffb42b;
}
/* FOOTER */
.site-footer {
  background: #f2f0f0;
  color: #2b2b2b;
  padding: 2svh 6vw 1svh;
}

.site-footer p {
    display: flex;
  font-size: 9px;
 justify-content: center;
 align-content: center;
  font-weight: 400;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .about-label {
  margin-bottom: 3px;
}
  .section-about {
    padding: 40px 80px;
    align-items: flex-start;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 4svh;
  }
  

 .col-main {
  max-width: 80vw;
  margin-right: 0px;
}
  .about-main-text {
  font-size: 0.6rem;

}

/* Headers (ADDRESS, CONTACT…) */
.about-label {
  font-size: 0.6rem;

}


/* Textes */
.about-text {
  font-size: 0.6rem;

}
.fade-text {

  font-size: 0.6rem;

}
}
/* MOBILE */
@media (max-width: 800px) {

    .about-text-small {
        margin-top: 5px;
  font-size: 0.55rem;
}
  .site-header {
    padding: 16px;
  }

  .logo-link img {
    height: 32px;
  }

  .section-about {
    padding: 40px 60px;
    align-items: flex-start; /* sur mobile, plutôt en haut */
  }
 

  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .desktop-video { display: none; }
  .mobile-video { display: block; }
}