/* ---------- 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: #ffd447;
  text-align: center;
}

.imgresponsive {
  max-width: 100%;         /* image responsive */
  height: auto;            /* conserve les proportions */
  text-align: center;
}

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

/* ---------- Layout ---------- */
.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0px 0px;
    position:sticky;
    background-color: #11111155;
    top:0;
    z-index:1000;
}

.price {
    font-size: 20px;
    font-weight: bold;
    font-family: ' Arial', cursive;
    margin: 10px 0;
    color: #ffd447;
}

.video {
    margin: 5px 0;
}

ul {
  list-style-type: none;
}

/* ---------- Hero ---------- */
.hero {
    text-align:center;
    padding: 0px 0px;
    background: no-repeat center center / cover;
}
.hero h1 { margin-bottom:0em; font-size:1rem; }
.btn { display:inline-block; padding:10px 20px; border-radius:4px; }
.btn-primary { background:#ff6f61; color:#fff; }
/* .btn-secondary { background:#555577; color:#fff; } */
.btn-secondary { background: #ff6f61; 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) */
}

.enumeration {
  text-align: center;
}
	
/* ---------- Content sections ---------- */
.content {
    max-width:1200px;
    margin:auto;
    padding:0px 0px;
}
.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);
  background-color: #f9f9f9;
  border: 4px solid #333333; 
}

/* 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);
}

.buttons {
  margin: 0px;
  padding: 5px 2px;
  background: #000000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.buttons.active {
  background: #888888;
}

.buttons:hover {
  background: #555;
}