/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Arial', sans-serif;
    color: #fff;
    background: url('https://example.com/path-to-your-image.jpg') no-repeat center center/cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  
  header {
    text-align: center;
    padding: 20px;
    background: #1D1D1D;
  }
  
  header h1 {
    font-size: 3rem;
  }
  
  header p {
    font-size: 1.2rem;
    margin-top: 10px;
  }
  
  /* Nouvelle section Bannière */
  .banner {
    background: url('/images/cover/article\ 2.jpg') no-repeat center center/cover;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
  }
  
  .banner-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 15px;
  }
  
  .banner h2 {
    font-size: 3rem;
    margin: 0;
  }
  
  .banner p {
    font-size: 1.2rem;
    margin-top: 10px;
  }
  
  /* Nouvelle section avant Footer */
  .final-banner {
    background: url('/images/space.jpg') no-repeat center center/cover;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
  }
  
  .final-banner-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 15px;
  }
  
  .final-banner h2 {
    font-size: 2.5rem;
    margin: 0;
  }
  
  .final-banner p {
    font-size: 1.2rem;
    margin-top: 10px;
  }
  
/* Container pour les cartes */
.container {
    display: grid;
    background: url('/images/boutique.jpg') no-repeat center center/cover;
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    gap: 20px;
    padding: 100px;
    width: 100%;  /* Assure que la largeur de l'image prend toute la largeur de l'écran */
    height: auto;  /* Ajuste la hauteur selon l'aspect de l'image */
    background-size: cover;  /* S'assure que l'image couvre toute la surface */
    background-position: center center;  /* Centrer l'image */
    background-attachment: fixed;  /* Fixe l'image en arrière-plan lors du défilement */
    margin: 0 auto;
}

  
  
  .card {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffffff33;
    border-radius: 15px;
    box-shadow: 0 4px 10px #00000080;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 100%;
    background-size: cover; /* Ajouter une image de fond pour chaque carte */
    background-position: center;
  }

  /* Carte spécifique pour Planet */
.card-1 {
  background-image: url('/images/cover/boutique/1.png');  /* Image spécifique pour la carte "Planet" */
  background-size: cover;
  background-position: center;
}
.card-2 {
  background-image: url('/images/cover/boutique/2.jpg');  /* Image spécifique pour la carte "Planet" */
  background-size: cover;
  background-position: center;
}
.card-3 {
  background-image: url('/images/cover/boutique/3.jpg');  /* Image spécifique pour la carte "Planet" */
  background-size: cover;
  background-position: center;
}
.card-4 {
  background-image: url('/images/cover/boutique/4.jpg');  /* Image spécifique pour la carte "Planet" */
  background-size: cover;
  background-position: center;
}
.card-5 {
  background-image: url('');  /* Image spécifique pour la carte "Planet" */
  background-size: cover;
  background-position: center;
}
.card-6 {
  background-image: url('/images/cover/boutique/6.jpg');  /* Image spécifique pour la carte "Planet" */
  background-size: cover;
  background-position: center;
}

  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px #6f00ff;
  }
  
  .icon-wrapper {
    text-align: center;
  }
  
  .icon-wrapper img {
    width: 60px;
    height: 60px;
  }
  
  .card h2 {
    font-size: 1.5rem;
    margin: 15px 0;
    text-align: center;
  }
  
  .card p {
    text-align: center;
    font-size: 1rem;
    padding: 0 15px 15px;
    line-height: 1.6;
  }
  
  footer {
    text-align: center;
    padding: 10px;
    background: #1D1D1D;
    font-size: 0.9rem;
  }
  






























  /* Responsive */
@media (max-width: 1024px) {
  .container {
      grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablettes */
  }
}

@media (max-width: 768px) {
  .container {
      grid-template-columns: 1fr; /* 1 colonne sur mobiles */
      gap: 15px; /* Réduit l'espacement */
  }

  .card {
      padding: 15px; /* Réduit le padding des cartes */
  }

  .card h2 {
      font-size: 1.3rem; /* Réduit légèrement la taille du titre */
  }

  .card p {
      font-size: 0.9rem; /* Texte légèrement plus petit */
  }

  .icon-wrapper img {
      width: 50px;
      height: 50px; /* Réduit les icônes pour s'adapter */
  }
}