/* styles ici */

/* Importer la police personnalisée */
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Manrope:wght@200..800&display=swap');


body {
    font-family: "Manrope", sans-serif;
    background-color: #ffffff;
    cursor: url('../medias/cursor.png'), auto;
    padding: 0;
    margin: 0;
}
a:hover, button:hover {
  cursor: url('../medias/click_pointer.png'), pointer;
}

p {
    font-family: "Manrope", sans-serif;
    font-weight: 300

}


header {
    display: grid;
    grid-template-columns: 1fr 7fr 0.5fr 0fr 0.5fr 0.1fr 0.1fr;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5 ease; /* Transition de 1 secondes */
    padding-block: 1vw;
    padding-inline: 3vw;
    text-align: right;
    gap: 1em;
    background: white;
}
header.loaded {
    opacity: 1;
}

  header a {
    text-decoration: none;
    color: #30435e;
    margin-inline: auto;
    white-space: nowrap
  }

 .langue
 {
    text-decoration:underline;
  }
.active{
    text-decoration:underline;
  
}
  .menu {
    
    font-size: 0.9em;
    color: #30435e;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    margin-block: auto;
    margin-inline: auto;


  }
.contact{
    width: auto;
}
.portfolio{
    font-family: "Calistoga", serif;
    font-weight: 800;
    font-size: 2.2rem;
    color: #30435e;
    visibility:hidden;
}
.portfolio_a{
    pointer-events: none;
}
main {
    display: grid;
    grid-template-columns: 4fr 1fr;
    opacity: 0;
    transition: opacity 0.5 ease; /* Transition de 1 secondes */
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
    padding-left: 3vw;
    padding-right: 3vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2em;
    text-align: left;

}
main.loaded {
    opacity: 1;
}


.sidebar{
    font-size: 0.9em;
}

.sidebar a {
  font-weight: 300;          /* normal par défaut */
  color: #b3b3b3;
}

.sidebar a.active {
  font-weight: bold; 
  color: #30435e;         /* gras quand actif */
}

.langue select {
    font-size: 1em;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color : #30435e;
}

#language-selector:focus {
    outline: none;
    border: none;
    color:#30435e;
}
#language-selector {
    text-align: right; /* Aligne le texte à droite */
}
#language-selector option {
    text-align: center; /* Centre le texte dans les options du menu */
}


/* IMAGE */
.image-container {
    overflow-x: hidden;
    max-width: 90%;
}
.image-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((120% - (1.5rem * (var(--per-view) - 1))) / var(--per-view));
    grid-gap: 11%;
    position: relative;
    left: -18%;
}
.image-wrapper > * {
    aspect-ratio: 3 / 4;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* IMAGE */

.pages1_2 {
    display: grid;
    grid-auto-flow: column;
    position: relative;
}

.image:hover {
    filter: opacity(70%);
}

.sidebar a{
    text-decoration: none;
    margin-inline: auto;
    white-space: nowrap
}

.overlay-text {
  position: fixed;       /* superposition au-dessus de tout */
  top: 50%;              /* centre vertical */
  left: 50%;             /* centre horizontal */
  transform: translate(-50%, -50%); /* ajuste pour centrer exactement */
  z-index: 10;         /* au-dessus de tout le reste */
  font-size: 3rem;
  color: #30435e;
  text-align: center;
  pointer-events: none;  /* le texte ne bloque pas les clics dessous */
  font-family: "Calistoga", sans-serif;
  font-size: 10em;
}

.home{
    opacity: 0;
    height: 100vh;
}


.gallery{
    text-align: center;
    align-content: center;
    width: 100%;
    height: 86.5%;
    overflow: hidden;
}
.container{
    z-index: -1;
    padding-inline: 13%;
    justify-items: center;
    position: absolute;
    top:0%;
    column-gap: 1.5%;
    padding-top: 6.7vw;
    left: 100%;
    display: grid;
    grid-template-columns: repeat(var(--per-view2), 1fr);;
    width: 76%;
    grid-auto-rows: 1fr;
}


.container img{
    margin-top: auto;
    margin-bottom: auto;
    transition: transform 0.5s ease; /* Transition fluide */
    object-fit: cover;
}
.container img:hover {
    transform: scale(1.05); /* Agrandir au survol */
    filter: opacity(100%);
  }

.gif-frame {
  position: fixed;       /* reste fixé pendant le scroll */
  top: 50%;              /* centre vertical */
  left: 50%;             /* centre horizontal */
  transform: translate(-50%, -50%); /* ajuste pour que le centre de l'image soit au centre de l'écran */
  
  width: 90%;          /* prend toute la largeur de la fenêtre */
  height: auto;         /* prend toute la hauteur de la fenêtre */
  object-fit: cover;     /* l'image remplit le conteneur sans déformer, recadrée si besoin */}
.home_gif{
  position: fixed;       /* reste fixé pendant le scroll */
  top: 50%;              /* centre vertical */
  left: 50%;             /* centre horizontal */
  transform: translate(-50%, -50%); /* ajuste pour que le centre de l'image soit au centre de l'écran */
  width: 100%;          /* prend toute la largeur de la fenêtre */
  height: 100%;         /* prend toute la hauteur de la fenêtre */
  object-fit: cover;     /* l'image remplit le conteneur sans déformer, recadrée si besoin */
  z-index: 9999;         /* superposition au-dessus de tout le reste */
}

.back-to-top {
  position: fixed;
  bottom: 2vh;
  right: 2vw;
  z-index: 99999; /* au-dessus de tout */
  width: 1.5em;
  font-size: 2.5rem;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  transition: all 0.3s ease;

}

.back-to-top:hover {
  transform: scale(1.1);
}

.fixed-bottom-right_a {
  position: fixed;
  bottom: 0;
  right: -8vw;
  width: 18vw;
  height: auto;
  z-index: 9999; /* tout au-dessus */
}
.fixed-bottom-right {
  width: 100%;
  height: auto;
}

nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.has-menu {
  position: relative;
}

/* Le menu caché de base */
.mega-menu {
  position: absolute;
  left:0%;
  text-align: left;
  background: white;
  padding: 20px;
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 999;
}

/* Hover classique */
.has-menu:hover .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.menu_projets_titles{
    color : #b3b3b3;
    transition: color 0.2s ease;
}
.menu_projets_titles:hover {
    color : #30435e;
}

/* ===========================
   HAMBURGER BUTTON (mobile)
=========================== */
.mobile-nav a {
    text-decoration: none;
    color: #30435e;
    margin-inline: auto;
    white-space: nowrap;
    flex: 1;
}

.hamburger {
  display: none; /* visible seulement mobile */
  position: fixed;
  top: 2%;
  left: 3%;
  z-index: 2000;
  width: 35px;
  height: 26px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transform: rotate(0deg);
  transition: transform 0.35s ease;
}

.hamburger span {
  width: 100%;
  height: 4px;
  background: #000;
  border-radius: 2px;
}

/* ===========================
   MOBILE PANEL (plein écran)
=========================== */
.mobile-panel {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1500;
  justify-content: center;
  align-items: center;
  opacity: 0;

  /* Animation haut*/
  transform: translateY(-100%);
  transition : transform 0.35s ease-in-out, opacity 0.25s ease-in-out;
}

.mobile-panel.active_phone {
  transform: translateY(0);
  opacity: 1;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  font-size: clamp(1vw, 4vw, 6vw);
  white-space: nowrap;
}
.proj_title{
  font-weight: bold;
  font-size: 0.8em;
  color:#30435e;
  font-family: "Manrope", sans-serif;

}
.menu_hamburger{
  width: 58%;
  margin-left: 2vw;
}
.hamburger.active_phone {
  transform: rotate(90deg);
}

  .menu_phone {
    
    font-size: 1.4em;
    color: #30435e;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    margin-block: auto;
    margin-inline: auto;


  }

  #gif-popup {
    position: fixed;
    bottom: 4vh;
    right: 8vw;
    z-index: 9999; /* toujours devant */
    display: none; /* caché au début */
}

#gif-popup img {
    width: 17vw; /* modifie comme tu veux */
    height: auto;
    pointer-events: none; /* pour ne pas bloquer les clics derrière */
}