:root {
  --header-height: 60px;
  --carousel-size: 500px;
}
@font-face {
  font-family: "PushSmash-Up"; /* nom que tu choisis */
  src: url("fonts/PushSmash-Up.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PushSmash-Down"; /* nom que tu choisis */
  src: url("fonts/PushSmash-Down.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* reset minimal */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: Arial, sans-serif; 

}

/* Header fixé + fond 50% */
header{
  position: fixed; top: 0; left: 0; right: 0;
  height: 10px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1px;
  background:#f7f7f7; ;
  
  z-index: 1;
}
#name, #aboutBtn { font-weight: 100px; cursor: pointer; }

/* Laisse la place sous le header au contenu */
body { padding-top: 10px; background: white; 
      cursor: url("docs/cursor.png") 16 16, auto;
}

/* CAROUSEL : non fixé, mais position: absolute pour être déplaçable */
.carousel{
  position: absolute;             /* suit le scroll de la page */
  width: 700px;
  height: 500px;
  overflow: hidden;
  
  cursor: 👅;
  user-select: none;
  z-index: 20;
  box-shadow: 0 5px 25px rgba(0,0,0,0.45);
  
}
.carousel:active{ cursor: grabbing; }

.carousel-track{
  display: flex;
  height: 100%;
  transition: transform .5s ease;
}

/* Images carrées 500x500 */
.carousel-track img{
  width: 700px;
  height: 500px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;

  /* IMPORTANT pour éviter que le navigateur “prenne” l’image au drag */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.carousel:hover {
  cursor: grab;
}

/* PANELS (slide right → left) */
#aboutPanel, #namePanel{
  position: fixed; top:0; right:0; height:100vh;
  background:#fff;
  border:10px solid #000; border-right:none;

  transform: translateX(100%);
  transition: transform .45s ease;  /* pas d’opacité */
  z-index: 40;
  display:flex; flex-direction:column;
  padding:16px 16px 12px 16px;
  overflow:hidden; box-sizing:border-box;
}
#aboutPanel{ width: 33%; max-width: 460px; }
#namePanel{ width: 25%; max-width: 360px; z-index: 45; }
#aboutPanel.show, #namePanel.show{ transform: translateX(0); }

.panel-content{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; padding-right:8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#closeAbout, #closeName{
  align-self:flex-end;
  background:none; border:none; font-size:18px;
  cursor:pointer; user-select:none;
}

.lightbox {
  display: none;               /* caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8); /* fond noir semi-transparent */
  justify-content: center;
  align-items: center;
  z-index: 2000;               /* au-dessus du reste */
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px black;
}



.content {
  font-size: 4.5vw;
  text-align: left;
  margin-top: 2px;
  margin-right: 40px; 
  margin-left: 15px; 
  line-height: 1.2;

}

.content a {
  color: blue;
  text-decoration: underline;
  
}

.bottom-image {
  position: fixed;        /* reste fixe au scroll */
  bottom: 160px;           /* espace avec le bas de la page */
  left: 10px;            /* ou left: 10px si tu veux à gauche */
  width: 370px;            /* taille de l’image (ajuste selon ton visuel) */
  height: auto;           /* conserve le ratio */
  z-index: 0;           /* au-dessus du reste */
}

.special-letter { 
  position: fixed;     /* reste visible même si on scroll */
  bottom: 10px;        /* distance par rapport au bas */
  left: 20px;   
  font-family: "PushSmash-Up", sans-serif;
  font-size: 1.5em;       /* tu peux agrandir si tu veux */
  color: green !important;
  text-decoration: none !important;
  transition: all 0.8s ease;

}
.special-letter:hover {
  font-family: "PushSmash-Down", sans-serif;
  font-size: 1.5em;       /* tu peux agrandir si tu veux */
  text-decoration: none;
  color: green; 

 }

@media (max-width: 768px) {

  html, body, .carousel {
    overflow: hidden; 
    height: 100vh; 
  }

  /* Exemple : réduire la taille du carousel */
  .carousel {
    width: 90vw;       /* 90% de la largeur de l'écran */
    height: 300px;     /* hauteur adaptée */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin: auto;
  }
  .carousel-track img {
    width: 100%;
    height: 100%;

  }

  /* Exemple : réduire la taille du texte */
  .content {
    font-size: 4vw;
    margin-left: 10px;
    margin-right: 10px;
  }

  /* Exemple : bouton spécial en bas à gauche */
  .special-letter {
    font-size: 2em;
    bottom: 15px;
    left: 15px;
  }
}