@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');


* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background-color: #0f0f0f; color: #fff; }


header {
display: flex; justify-content: space-between; align-items: center;
background-color: rgba(0,0,0,0.7); padding: 15px 40px; border-bottom: 2px solid #00ccff;
}
header .logo { display: flex; align-items: center; gap: 10px; }
header img { height: 50px; }
header nav a {
color: #fff; text-decoration: none; margin: 0 10px; transition: 0.3s;
}
header nav a:hover { color: #00ccff; }


.hero {
  position: relative;
  text-align: center;
  padding: 150px 20px;
  overflow: hidden;
}

/* Image principale */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 2.5s ease-in-out;
  z-index: -1;
}

@keyframes bgSwitch {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}

.hero::before {
  background-image: url('../Img/Kindercity1.webp');
  animation: bgSwitch 20s infinite;
}

.hero::after {
  background-image: url('../Img/Kindercity2.webp');
  animation: bgSwitch 20s infinite reverse;
}

.hero h2 { font-size: 2.5rem; margin-bottom: 10px; color: #00ccff; }
.btn {
background-color: #00ccff; color: #000; padding: 14px 24px; border-radius: 10px;
text-decoration: none; font-weight: bold; transition: 0.3s;
}
.btn:hover { background-color: #0099cc; }

.btn2 {
background-color: #00ccff; color: #000; padding: 20px 500px; border-radius: 14px;
text-decoration: none; font-weight: bold; transition: 0.3s;
}

.preview { text-align: center; padding: 80px 20px; }
.cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
.card {
background: #1a1a1a; padding: 20px; border-radius: 10px; width: 300px;
box-shadow: 0 0 10px #00ccff33; transition: transform 0.3s;
}
.card:hover { transform: translateY(-5px); }
.card img { width: 100%; border-radius: 10px; margin-bottom: 10px; }
.card h4 { color: #00ccff; }


footer { text-align: center; padding: 20px; background: #111; border-top: 2px solid #00ccff; margin-top: 50px; }


.random { text-align: center; padding: 80px 20px; }
.random img { margin-top: 20px; width: 60%; border-radius: 12px; }


#loading-container { text-align: center; color: white; padding-top: 200px; }
#loading-container img { width: 150px; animation: pulse 2s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }

.discord-widget {
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    max-width: 800px;
    background: #1e1e1e; /* couleur fond sombre comme ton header/footer */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.discord-widget h2 {
    color: #00bfff; /* bleu clair comme tes titres */
    margin-bottom: 10px;
}

.discord-widget p {
    color: #ddd;
    margin-bottom: 20px;
}

.discord-widget iframe {
    border-radius: 8px;
    width: 100%;
    max-width: 350px;
    height: 500px;
    border: none;
}