/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    background: #1e1e1e;
    color: #f5f5f5;
    line-height: 1.6;
    /*  horizontal-offset   vertical-offset   blur-radius   color   */
    text-shadow: 1px 1px 5px rgba(0,0,0,1),
                 2px 2px 0px rgba(0,0,0,1);
}
a { text-decoration: none; color: inherit; }

h1, h2 {
  color: #33AAFF;
}


/* Lang selector style */
#langSwitcher {
    background: black;
    border: none;
    color: inherit;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
}

.body {
    margin: 0;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    background: url('../assets/images/background.webp') no-repeat center center/cover;
    background-attachment: fixed;   /* <‑ La ligne clé */
    color: #f5f5f5;
    font-size:0.8rem;
}

/* ---------- Layout ---------- */
.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    background:#222;
    position:sticky;
    top:0;
    z-index:1000;
}
.logo { font-size:1.5rem; }
.menu a { margin-left:15px; }

/* ---------- Hero ---------- */
.hero {
    text-align:center;
    padding:40px 20px;
    background: no-repeat center center / cover;
}
.hero h1 { margin-bottom:0.5em; font-size:1.5rem; }
.btn { display:inline-block; padding:10px 20px; border-radius:4px; }
.btn-primary { background:#ff6f61; color:#fff; }
.btn-secondary { background:#444; color:#fff; }

/* Au survol */
.btn:hover,
.btn:focus {          /* focus pour clavier */
    background-color:#004999;   /* bleu plus foncé */
    transform:scale(1.05);      /* léger agrandissement (optionnel) */
}
	
/* ---------- Content sections ---------- */
.content {
    max-width:1200px;
    margin:auto;
    padding:20px 20px;
}
.world-list { list-style:none; padding:0; }
.world-list li {
    margin-bottom:10px;
    cursor:pointer;
}
.console-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(50px,1fr));
    gap:0px;
}
.console-grid figure { text-align:center; }
.console-grid img { width:100%; height:auto; border-radius:4px; }

/* ---------- Footer ---------- */
.footer {
    background:transparent;
    text-align:center;
    padding:10px 0;
    font-size:0.6rem;
}

/* ---------- Responsive ---------- */
@media (max-width:1200px) {
    .hero h1 { font-size:1.5rem; }
}

/* Conteneur global */
.carousel {
  position: relative;
  width: 80%;
  max-width: 800px;          /* largeur maximale du slider */
  margin: 2rem auto;         /* centrage horizontal + marge verticale */
  overflow: hidden;          /* cache les images hors vue */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

/* Les slides (images) */
.carousel-slide {
  display: none;             /* on masque toutes sauf la première */
  width: 100%;
  height: auto;
  transition: opacity .5s ease-in-out;
}

.carousel-slide.active {      /* slide visible */
  display: block;
}

/* Boutons de navigation */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,.4);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 3px;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,.7);
}