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

body {
    
    background: radial-gradient(circle at 30% 20%,  
        #1a1a2e 10%, 
        #0f3460 30%, 
        #16213e 60%, 
        #090a1a 100%
    ),
    radial-gradient(circle at 80% 80%,  
        #0f3460 5%, 
        #1a1a2e 25%, 
        #16213e 50%, 
        #090a1a 100%
    );
    
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    font-family: 'Press Start 2P', cursive; /* Police rétro */
    margin: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(20px);
    opacity: 0.6;
    z-index: -1;
}

@font-face {
    font-family: 'Jersey';
    src: url('fonts/Jersey10-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Jersey15';
  src: url('fonts/Jersey15-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Appliquer la police */
h1 {
    font-family: 'Jersey';
    font-size: 50px;
    color: white;
    text-align: center;
}


.navbar {
    min-height: 80px !important; /* Augmente la hauteur */
    padding: 20px 50px !important; /* Plus d'espace en haut et en bas */
    display: flex;
    align-items: center; /* Centre le contenu verticalement */
    background-color: #0a0f1e !important; /* Bleu très foncé */
    border-bottom: 2px solid #1c2541; /* Légère bordure */
    font-family: 'Jersey', sans-serif;
    padding: 0; /* Supprimez le padding si nécessaire */
  margin: 0; /* Supprimez la marge si nécessaire */
}

.navbar-nav{
    gap:40px;
}


/* Personnalisation des liens de la navbar */
.navbar-nav .nav-link {
    color: #ffffff !important; /* Blanc */
    font-weight: bold;
    font-size: 45px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #4da8da !important; /* Bleu clair pour effet de survol */
}

.navbar-nav .nav-link.active {
    color: #4da8da !important; /* Bleu clair pour le lien actif */
}


/* Bouton du menu responsive */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    filter: invert(1); /* Rendre le bouton visible en mode sombre */
}

/* Changer la couleur du bouton navbar en mode mobile */
.navbar-toggler:focus {
    box-shadow: none;
}

#manette{
    width: 150px;
}

.footer {
    background-color: #0a0f1e;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: 'Jersey';
  }
  
  .footer p {
    margin: 0;
    font-size: 25px;
  }
  
  .banner {
    position: relative;
    width: 100%;
    height: 700px; /* Hauteur fixe de la bannière */
    background: url('images/console_bann.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  .banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Assombrit l'image */
  }
  
  .banner-content {
    position: relative;
    z-index: 1;
    max-width: 1000px; /* Largeur max du texte */
    padding: 20px; /* Espacement autour du texte */
  }
  
  .banner h1 {
    font-size: 70px; /* Taille du titre */
    margin: 0;
  }

  .banner li{
    list-style-type: none;
    margin-top: 30px;
  }
  
  .banner li a {
    color: white;
    text-decoration: none;
    font-family: 'Jersey';
    font-size: 40px;
    position: relative;
    
  }
  
  .banner li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;
    background-color: #ffffff; /* Couleur de la barre */
    transition: width 0.5s ease, left 0.5s ease;
    transform: translateX(-50%); /* Centrer la barre */
    
  }
  
  .banner li a:hover::before {
    width: 100%; /* La barre s'étend à 40% de la largeur du lien */
    left: 50%; /* Elle part du centre */
    transform: translateX(-50%); /* Garder la barre centrée même quand elle s'étend */
  }


  .banner2 {
    position: relative;
    width: 100%;
    height: 700px; /* Hauteur fixe de la bannière */
    background: url('images/spacewar.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  .banner2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Assombrit l'image */
  }
  
  .banner-content2 {
    position: relative;
    z-index: 1;
    max-width: 1000px; /* Largeur max du texte */
    padding: 20px; /* Espacement autour du texte */
  }
  
  .banner2 h1 {
    font-size: 70px; /* Taille du titre */
    margin: 0;
    top: 50px;
  }

  .banner2 p{
    color: rgb(255, 255, 255);
    font-family: 'Jersey15';
    font-size: 30px;
    position: relative;
    margin-top: 30px;
  }

  .container-cards {
    display: flex;
    flex-wrap: wrap; /* Les cartes se réorganisent sur plusieurs lignes */
    justify-content: center; /* Les cartes sont centrées horizontalement */
    gap: 20px; /* Espacement entre les cartes */
    padding: 20px;
  }
  
  /* Style des cartes */
  .card {
    background: #090a1a;
    border-radius: 12px;
    padding: 15px;
    width: 100%; /* Les cartes occupent toute la largeur disponible */
    max-width: 500px; /* Taille maximale des cartes */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgb(20, 20, 60);
    text-align: center;
    overflow: hidden;
  }
  
  /* Effet de survol des cartes */
  .card:hover {
    transform: scale(1.05);
    background: #000014;
  }
  
  /* Image des cartes */
  .card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  /* Texte sous l'image dans la carte */
  .card .text {
    display: block;
    color: rgb(255, 255, 255);
    font-size: 23px;
    font-weight: 600;
    margin-top: 10px;
    transition: color 0.3s;
    cursor: pointer;
    font-family: 'Jersey15';
    letter-spacing: 1px; /* Augmente l'espacement entre les caractères */
    
  }
  
 
  .search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    background: #000014; 
    padding: 10px;
    border-radius: 8px;
    max-width: 650px;
}

.search-input {
    flex: 1;
    padding: 10px;
    font-size: 23px;
    font-family: 'Jersey';
    border: none;
    background: #0e0f25;
    color: white;
    outline: none;
    border-radius: 5px 0 0 5px;
    width: 530px;
}

.search-btn {
    padding: 10px;
    font-size: 20px;
    border: none;
    background: #1b1e5c;
    color: white;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    
}

.search-btn:hover {
    background: #2f35aa;
}

















/* ========================= */
/* 🎮 STYLISATION DU JEU 🎮 */
/* ========================= */

#game-container {
  text-align: center;
  margin-top: 30px;
  padding: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, #15b800,#2100da, #da0000);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
  position: relative;
}

/* 🔥 TITRE PRINCIPAL DU JEU 🔥 */
#game-title {
  font-family: 'Jersey15', sans-serif;
  font-size: 50px;
  color: #FFD700;
  text-shadow: 4px 4px 0px #000;
  margin-bottom: 20px;
}

#game-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 25px;
  background-image: url(images/mariobackground.jpg);
  background-size: cover;
  background-position: center; /* Centrer l'image */
  background-repeat: no-repeat;
  width: 100%; /* Assure que l'élément occupe toute la largeur disponible */
  height: 100vh;
  border: 6px solid #000;
  border-radius: 20px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
  overflow: hidden; /* Empêche les éléments de sortir du cadre */
  max-width: 100%; /* S'assure que le conteneur prend toute la largeur disponible */
}

/* 📏 TAILLE DU JEU 📏 */
#game-iframe {
  width: 100%;
  max-width: 1010px;
  height: 732px;
  aspect-ratio: 4 / 3;
  border: 6px solid #FFF;
  border-radius: 12px;
  background-color: #ffffff;
}

/* 🎭 MARIO & LUIGI CÔTÉS 🎭 */
#luigi, #mario {
  position: absolute;
  bottom: 0;
  height: 65%  ; /* Ajuste la hauteur à 100% de l'iframe */
  width: auto; /* Garde le rapport de proportions */
}

#luigi {
  left: 0; /* Place Luigi à gauche */
}

#mario {
  right: 0; /* Place Mario à droite */
}

/* 🎮 INTÉGRATION DES CONTRÔLES 🎮 */
#game-controls {
  font-family: 'Jersey15', sans-serif;
  font-size: 26px;
  color: #FFD700;
  background: rgba(0, 0, 0, 0.7);  /* Fond semi-transparent */
  border-top: 6px solid #000;
  border-radius: 0 0 20px 20px;
  padding: 20px;
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-in-out; /* Ajoute une transition fluide */
}

/* 🎮 Effet au survol des contrôles */
#game-controls:hover {
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); /* Effet de survol */
}

/* 📝 TITRE DES CONTRÔLES 📝 */
#game-controls h3 {
  font-size: 30px;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0px #000;
  text-align: center; /* Centrer le titre */
}

/* 🔲 LISTE DES CONTRÔLES 🔲 */
#game-controls ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 🔹 ITEM DES CONTRÔLES 🔹 */
#game-controls li {
  font-size: 22px;
  margin: 8px 0;
  color: #FFD700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  transition: color 0.3s ease-in-out;
}

/* 🎮 ICONES DES CONTRÔLES 🎮 */
#game-controls li::before {
  content: "🎮 ";
  font-size: 28px; /* Agrandir les icônes */
  margin-right: 10px;
}

/* Masquer le message et l'image par défaut */
#message-container {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh; /* Prendre toute la hauteur de la fenêtre */
  text-align: center;
  margin-top: 0;
  height: 500px;
  
}

#message-text {
  font-size: 50px;
  font-family: 'Jersey';
  color: #ffffff;
  text-shadow: 2px 2px 0px #000;
  position: absolute;
  top: 50%; /* Centrer verticalement */
  left: 50%; /* Centrer horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour un centrage parfait */
  z-index: 2; /* Assure que le texte soit au-dessus de l'image */
  width: 300px;
  
}

#message-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* L'image occupe toute la fenêtre */
  object-fit: cover; /* L'image couvre toute la surface sans déformation */
  z-index: 1; /* L'image reste en arrière-plan */
  background: rgba(0, 0, 0, 0.5); /* Assombrit l'image */
  filter: brightness(50%); /* Réduit la luminosité de l'image pour l'assombrir */
  object-fit: cover; /* L'image couvre toute la surface sans déformation */
}


.table th, .table td {
  text-align: center;
}

th, td {
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

td:nth-child(7), td:nth-child(8) { /* Colonne Supprimer et Modifier */
  width: 120px; /* Augmente la largeur des colonnes */
}

.console-img {
  width: 80px;
  border-radius: 5px;
  display: block;
  margin: auto;
}

.btn-danger, .btn-success {
  font-size: 0.9rem;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

a .btn-outline-info{

  font-family: Arial, Helvetica, sans-serif;
}

.btn-outline-info:hover {
  background-color: #00bfff !important;
  color: #0d1124 !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 191, 255, 0.2) !important;
}


h1.page-title {
  font-family: 'Jersey';
  font-size: 50px;
  color: white;
  text-align: center;
}

p.form-description {
  font-size: 20px;
  color: #ccc;
  text-align: center;
}

a.back-link {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  margin-left: 20px;
  display: inline-block;
}

a.back-link:hover {
  color: #4da8da;
}

.album-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  font-size: 18px;
  color: #fff;
  display: block;
  margin-bottom: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

.form-input, .form-select {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  background-color: #16213e;
  border: 1px solid #1a1a2e;
  border-radius: 8px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.form-input:focus, .form-select:focus {
  border-color: #4da8da;
  outline: none;
}

button.form-submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #1b1e5c;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
}

button.form-submit-btn:hover {
  background-color: #2f35aa;
}

.btn-dashboard {
  display: inline-block;
  padding: 12px 25px;
  font-size: 20px;
  font-family: 'Jersey15';
  color: white;
  background: #1b1e5c;
  border: 2px solid #4da8da;
  border-radius: 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.btn-dashboard:hover {
  background: #4da8da;
  color: #0a0f1e;
  border-color: white;
  transform: scale(1.05);
}

/* Lien de retour au tableau de bord */
.back-link {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #a5a5a5;
  text-decoration: none;
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #00bfff;
  transition: all 0.3s ease;
}

.back-link:hover {
  background-color: #b3e0ff;
  color: #0056b3;
}

/* Titre pour "Vous venez de modifier une console" */
.form-description {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  color: #ffffff;
  margin: 30px 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Message de succès "Console ajoutée avec succès" */
.success {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #28a745;
  background-color: #d4edda;
  padding: 20px;
  border-radius: 10px;
  margin: 30px auto;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
}

/* Effet de survol pour le message de succès */
.success:hover {
  transform: scale(1.05);
}

/* Ajustement de l'espace pour les textes */
hr {
  width: 50%;
  border-top: 2px solid #007bff;
  margin: 20px auto;
}

.btn-primary{
  font-family: Arial, Helvetica, sans-serif;
}

.btn-outline-info{
  font-family: Arial, Helvetica, sans-serif;
}

h1.display-4 {
  color: #007bff;
  font-weight: bold;
  margin-bottom: 20px;
}

p.lead {
  font-size: 1.2rem;
  color: #ffffff;
  font-family: 'Jersey15';
}

/* Cartes personnalisées */
.custom-card {
  background-color: #020529;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.custom-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Jersey15';
}

.custom-card-text {
  font-size: 1rem;
  color: #ffffff;
  font-family: 'Jersey15';
}

.custom-card .btn {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 25px;
  text-align: center;
}

/* Boutons personnalisés */
.btn-outline-success, .btn-outline-info {
  transition: background-color 0.3s ease;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-family: 'Jersey15';
}



.btn-outline-info:hover {
  background-color: #17a2b8;
  color: white;
}

/* Layout des cartes */
.row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Espacement des sections */
.my-5 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.recherche-titre{
  font-family: 'Jersey15';
  text-align: center;
  
}

.recherche-none{
  font-family: 'Jersey15';
  text-align: center;
}

.recherche-nop{
  font-family: 'Jersey15';
  text-align: center;
}














































/* Adaptation mobile */
@media screen and (max-width: 576px) {
    .search-container {
        max-width: 90%;
    }

    .search-input {
        font-size: 14px;
    }

    .search-btn {
        font-size: 16px;
    }
}

/* Responsivité pour les petits écrans */
  @media screen and (max-width: 768px) {
    .card {
      max-width: 90%; /* Les cartes occuperont 90% de la largeur de l'écran */
    }
  }
  
  @media screen and (max-width: 576px) {
    /* Adaptation pour les très petits écrans */
    .container-cards {
      flex-direction: column; /* Les cartes se placent en colonne */
      align-items: center; /* Centrer les cartes sur l'écran */
    }
  
    .card {
      max-width: 100%; /* Les cartes occupent toute la largeur de l'écran */
    }
  }

  @media screen and (max-width: 576px) {
    /* Réduction de la taille du texte de la navbar */
    .navbar-nav .nav-link {
        font-size: 20px;
    }

    /* Ajustement de la hauteur minimale de la bannière */
    .banner {
        min-height: 300px;
        background-size: cover;
    }

    /* Centrage du texte et ajustement de la hauteur */
    .banner h1 {
        font-size: 50px;
    }

    .banner2 {
      min-height: 300px;
      background-size: cover;
  }

  /* Centrage du texte et ajustement de la hauteur */
  .banner2 h1 {
      font-size: 50px;
  }

  .banner2 p {
    font-size: 20px;
  }

    /* Correction possible pour le footer collé */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .footer {
        margin-top: auto;
    }

    .search-container{
      width: 300px;
    }

    .search-input{
      width: 230px;
    }
}

.navbar-nav {
  flex-wrap: wrap; /* Permet de passer à la ligne si besoin */
  justify-content: center; /* Centre les liens si nécessaire */
}

/* Afficher le message et l'image lorsque la largeur est <= 1110px */
@media (max-width: 1110px) {
  #message-container {
    display: block;
  }
}


/* ========================= */
/* 🎮 MEDIA QUERIES 🎮 */
/* ========================= */

/* À partir de 1690px, faire disparaître Mario et Luigi */
@media (max-width: 1480px) {
  #luigi, #mario {
    display: none; /* Masque Luigi et Mario */
  }
}

/* À partir de 1110px, faire disparaître tout le jeu */
@media (max-width: 1110px) {
  #game-container {
    display: none; /* Masque tout le contenu du jeu */
  }
}