@font-face {
font-family: 'abordage-regular';
src: url('font/abordage-regular.woff')format('woff'),
     url('font/abordage-regular.otf')format('opentype');
}

@font-face {
font-family: 'builtbd';
src: url('font/builtbd.woff')format('woff'), 
     url('font/builtbd.otf')format('opentype');
}


@font-face {
     font-family: 'dublin-bold';
     src: url('font/dublin-bold')format('woff'),
          url('font/dublin-bold')format('opentype');
}

@font-face {
     font-family: 'piala-regular';
     srr: url('font/piala-regular')format('woff'),
          url('font/piala-regular')format('opentype');
}



/* styles de texte*/


h1 {
     font-family: "dublin-bold";
     font-size: 60px;
     margin-left: 40px;
     color: whitesmoke;

}

h2 {
     color: whitesmoke;
     font-family: "dublin-bold";
     margin: 10px 10px 10px 40px;
     font-size: 20px;

}

a {
     font-family: "abordage-regular";
     font-size: 20px;
     margin: 20px 20px 20px 20px;
     color: whitesmoke;
     text-decoration: none;
}

h3 {
     font-family: "abordage-regular";
     font-size: 20px;
     margin: 30px;
     color: whitesmoke;
}

h4 {
     font-family: "abordage-regular";
     font-size: 15px;
     color: whitesmoke;
     position: fixed;
}

h5 {
     font-family: "abordage-regular";
     font-size: 40px;
     margin: 30px;
     color: whitesmoke;
}


header {
          position: fixed;         /* Fixe le header en haut */
          top: 0;
          left: 0;
          height: 100px;
          width: 100%;
          background-color: black;
          z-index: 1000;
          padding: 0 20px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
          display: flex;
          align-items: center;
          justify-content: flex-start;
}

li {
  list-style: none; 
}

header img{
     height: 120px;
     width: auto;
}


main {
     padding-top: 100px;
     margin: 0;
     }

/* images et vidéos*/

img {
     width: 100%;
     height: auto;
     margin: none;
     }


body {
     background-color:#1F1F1F;
     }


/*______________________________________________*/

/* desktop*/


@media only screen and (min-width: 800px) {


.container_header {
  display: flex;            
  justify-content: space-between;
  align-items: center;      
  padding: 10px 20px;
}


.container_project {
     display: grid;
     grid-template-columns: 1fr 1fr;

     }

.container_project2 {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;

     }

.container_project3 {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;

     }

.container_project4 {
     display: grid;
     grid-template-columns: 3fr 1fr;

     }

.container_project5 {
     display: grid;
     grid-template-columns: 1fr;
     margin-top: 10px;

     }

.cursor {
    width: 20px;
    height: 20px;
    background-color: #efae4a;
    border-radius: 50%;
    position: fixed; /* bien fixe sur l’écran */
    top: 0;
    left: 0;
    pointer-events: none; /* ne bloque aucun clic */
    transform: translate(-50%, -50%);
    z-index: 99999; /* encore plus haut que tout */
    transition: transform 0.05s ease;
}


body {
  cursor: none;
  margin: 50px;
  font-family: sans-serif;
  padding-top: 80px;
}

/* --- Menu --- */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;       
  gap: 30px;             
}

nav ul {
  display: flex;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
  color: whitesmoke;             
}

#burger {
  display: none;
  cursor: pointer;
}

}

/* --------- VERSION MOBILE --------- */

@media (max-width: 800px) {

  /* --- Menu --- */
  /* cacher le menu par défaut sur mobile */

  nav ul {
    top: 80px;
    position: fixed;
    right: -100%;
    flex-direction: column;
    text-align: right;
    transition: 0.2s;
  }

  nav li {
    padding: 10px 0;
    background: black;
  }
  nav li:hover {
    background: #efae4a;
  }
  nav.active ul {
    right: 0;
  }

  /* afficher le burger */
  #burger {
    display: block;
  }
  #burger:before {
    content: "\2630"; /* code pour ☰ */
    font-size: 40px;
    color: whitesmoke;
  }
  .active #burger:before {
    content: "\2715"; /* code pour X */
    font-size: 35px;
    color: whitesmoke;
  }


  /* classe active : affiche le menu */
  nav.active {
    display: flex;
  }
}


/* --------- PASSAGE D'UN PROJET À L'AURTE --------- */

.project {
  position: relative;
  padding-bottom: 100px;
  margin-bottom: 100px;
}

.project::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
}

.project:hover::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transition: background 0.3s ease;
}


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

@media (max-width: 800px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr fr 1fr; /* 3 colonnes égales */
  align-items: center; /* si tu veux centré verticalement */
  text-align: center; /* centre le texte horizontalement */
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.centered-text p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff; /* selon ton thème sombre */
}



/* ===== Carousel ===== */
.carousel {
  position: relative;
  max-width: 80%;
  margin: 0px auto 10px; /* espace sous le header */
  overflow: hidden;
  border-radius: 12px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.carousel-slide h2 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: "dublin-bold";
  color: whitesmoke;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 1.2rem;
}

/* ===== Points (navigation) ===== */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: whitesmoke;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.carousel-btn:hover {
  transform: translateY(-50%) scale(1.2);
  background-color: #ffca66;
}

.carousel-btn.prev { left: 15px; }
.carousel-btn.next { right: 15px; }

@media (max-width: 800px) {
  .carousel {
    max-width: 90%;
    margin-top: 130px;
  }

  .carousel-slide h2 {
    font-size: 1rem;
  }

  .carousel-btn {
    width: 25px;
    height: 25px;
  }
}
main.carousel-page {
  padding-top: 0px;
  margin: 0;
}

main.carousel-page .carousel {
  margin-top: none;
}