/* ----- Reset ----- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----- Fond rétro avec effet bounce + cycle ----- */
body {
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* Le fond animé est isolé sur ::before */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("image/fond.webp") center/100% 100% no-repeat, MidnightBlue;
  z-index: -1;
  animation: bgPulse 2s ease-in-out infinite alternate, bgCycle 30s linear infinite;
}

/* Effets du fond */
@keyframes bgPulse {
  0% { background-size: 100% 100%; }
  100% { background-size: 115% 115%; }
}

@keyframes bgCycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


/* ----- Header ----- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

h1 {
  text-shadow: 0 0 10px #00c3ff, 0 0 20px #0077ff;
}


.back-container {
    text-align: left;
    margin: 20px 0 0 10px; /* marge haut / droite / bas / gauche */  
}

/* ----- Bouton retour XP ----- */
.back-btn {
  background: linear-gradient(180deg, #cfe7ff, #8ab5e8);
  border: 2px solid #1c4fa1;
  border-radius: 6px;
  color: #001f3f;
  text-decoration: none;
  padding: 6px 12px;
  font-weight: bold;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5), inset 0 0 3px #fff;
  transition: 0.2s ease;
}

.back-btn:hover {
  background: linear-gradient(180deg, #dfffdf, #a8f0a8);
  transform: translateY(-2px);
  box-shadow: 0 0 8px #00ff90;
}

/* ----- Grille ----- */
.container {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  max-width: 1100px;
}

/* ----- Cartes ----- */
.card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid #00b7ff;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 0 15px #00c3ff, 0 0 25px #0077ff;
  animation: shake 0.3s infinite;
}

.card:hover img {
  transform: scale(1.08);
}

/* Différents formats */
.portrait {
  grid-row: span 2;
}
.landscape {
  grid-column: span 2;
  height: 150px;
}

/* Tremblement */
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); }
  25% { transform: translate(-2px, 1px) rotate(0deg); }
  50% { transform: translate(2px, -1px) rotate(1deg); }
  75% { transform: translate(-1px, -2px) rotate(0deg); }
}

/* ----- Lightbox ----- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 15, 30, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border: 3px solid #00b7ff;
  border-radius: 10px;
  box-shadow: 0 0 20px #00b7ff, 0 0 40px #0077ff;
  animation: zoomIn 0.4s ease;
  cursor: pointer;
}

.lightbox.hidden {
  display: none;
}

#closeBtn {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 40px;
  color: #00c3ff;
  cursor: pointer;
  text-shadow: 0 0 8px #00ffff;
  transition: transform 0.2s;
}

#closeBtn:hover {
  transform: scale(1.2);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
    .star {
      position: fixed;
      width: 32px;
      height: 32px;
      background: url(image/secret.jpg);
      background-size: contain;
      pointer-events: none;
      animation: starFade 0.8s linear forwards;
      z-index: 9999;
    }
    @keyframes starFade { from{opacity:1;transform:scale(1) rotate(0deg);} to{opacity:0;transform:scale(0.1) rotate(180deg);} }
	

		* {
  cursor: url("image/pouler.png") 16 16, auto !important;
}