@charset "UTF-8";
/*********************** Utils ************************/
/******************** Colors ***********************/
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
.doubleLines {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  white-space: nowrap;
  top: 50%;
}

.doubleLines::before {
  left: 0;
  transform: translate(-5%, -50%);
}

.doubleLines::after {
  right: 0;
  transform: translate(5%, -50%);
}

.doubleLines::before,
.doubleLines::after {
  content: "";
  height: 3px;
  width: 150px;
  background-color: #9a2257;
  box-shadow: 0 6px 0 #494786;
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.hero-content h1,
.hero-content .italic-text,
.hero-content p,
.hero-content .btn-hero-container {
  opacity: 0;
  transform: translateY(-100%);
}

.gameboy-image {
  opacity: 0;
  transform: translateX(100%);
}

.hero-content h1 {
  opacity: 0;
  transform: translateY(-100%);
  animation: slideInFromTop 1s ease-out forwards 0.2s;
}
.hero-content .italic-text {
  opacity: 0;
  transform: translateY(-100%);
  animation: slideInFromTop 1s ease-out forwards 0.4s;
}
.hero-content p {
  opacity: 0;
  transform: translateY(-100%);
  animation: slideInFromTop 1s ease-out forwards 0.6s;
}
.hero-content .btn-hero-container {
  opacity: 0;
  transform: translateY(-100%);
  animation: slideInFromTop 1s ease-out forwards 0.8s;
}

.gameboy-image {
  opacity: 0;
  transform: translateX(100%);
  animation: slideInFromRight 1s ease-out forwards 0s;
}

nav {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

/*********************** Base ************************/
/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */

/*
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}
*/
/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) in case you use it with normalize.css */
ol,
ul {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
  object-fit: cover;
}

/* Removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

.integration {
  margin-top: 100px;
  flex-grow: 1;
}

body {
  background-image: linear-gradient(rgba(241, 241, 241, 0.5), rgba(255, 255, 255, 0.932)), url(./images/robotGB.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  overflow-x: hidden;
  background-attachment: fixed;
}

.main-style .posts,
.main-style .container,
.main-style .block-comments,
.main-style .slide-container {
  padding: 5rem 1rem;
}

h1 {
  font-size: clamp(2rem, 2vw + 1rem, 3.5rem);
  text-transform: uppercase;
  text-align: center;
  font-family: "Press Start 2P", system-ui;
  margin-bottom: 1rem;
  font-weight: 900;
  line-height: 1.3;
  color: #494786;
}

h2 {
  font-family: "Zen Old Mincho", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: calc(16px + 1.1vw);
  /* Pour les grands écrans, fixez une taille maximale */
}
@media (max-width: 500px) {
  h2 h2 {
    font-size: 6vw; /* Taille minimale pour assurer la lisibilité */
  }
}
@media (min-width: 1200px) {
  h2 h2 {
    font-size: 36px; /* Taille maximale pour éviter que la police devienne trop grande */
  }
}

h3 {
  font-size: clamp(1rem, 2vw + 1rem, 1.6rem);
  font-weight: 900;
}

h4 {
  font-size: clamp(1rem, 2vw + 1rem, 1.4rem);
  font-weight: 900;
}

p,
ul,
li,
td {
  font-size: clamp(1rem, 0.8438rem + 0.5vw, 1.125rem);
  font-family: "Zen Old Mincho", sans-serif;
  line-height: 1.4;
}

.btn-hero {
  font-size: clamp(0.5rem, 1vw + 0.5rem, 0.8rem);
}

@media only screen and (max-width: 500px) {
  h2 {
    font-size: 4vw;
  }
  h3 {
    font-size: 3.8vw;
  }
  p,
  a {
    font-size: 3.2vw;
  }
}
/*********************** Components ************************/
footer {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 30px;
  background: #c4bebb;
}
footer h3 {
  font-family: "Poppins", sans-serif;
}
footer .desc {
  font-weight: 900;
}
footer .desc,
footer a,
footer .copyright-wrapper {
  color: black;
  font-family: "Poppins", sans-serif;
}
footer .copyright-wrapper {
  color: white;
}
footer .copyright-wrapper a {
  color: #9a2257;
  font-weight: 900;
  cursor: pointer;
}
footer .footer-container {
  width: 100%;
}
a
{
	cursor: grab;
}

footer .footer-container .footer-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
footer .footer-container .footer-wrapper .footer-widget {
  margin: 0 15px 50px;
  padding: 0 12px;
}
footer .footer-container .footer-wrapper .footer-widget:nth-child(1) {
  margin-right: 15px;
}
footer .footer-container .footer-logo {
  margin-bottom: 30px;
  vertical-align: middle;
  width: 150px;
}
footer .footer-container .footer-widget p {
  margin-bottom: 30px;
  line-height: 24px;
}
footer .footer-container .footer-widget h3 {
  margin: 10px 0 35px;
  font-weight: 600;
  text-align: center;
}
footer .footer-container .footer-widget a {
  cursor: pointer;
}
footer .footer-container .socials {
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .footer-container .socials a {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  color: #fff;
  background: #9a2257;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-out;
}
footer .footer-container .socials a:hover {
  background-color: #771b43;
}
footer .copyright-wrapper {
  text-align: center;
  background: #777371;
  padding: 1rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-zoom-container {
  overflow: hidden;
  cursor: grab;
}

.modal-content {
  display: block;
  max-width: 90%;
  max-height: 80vh;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #9a2257;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 1rem;
}

.close:hover,
.close:focus {
  color: #9a2257;
  text-decoration: none;
  cursor: pointer;
}

/* Style de base pour la modale, inchangé */
.userModal {
  display: none; /* La modale est cachée par défaut */
  position: fixed; /* Positionnement fixe par rapport à l'écran */
  left: 0;
  top: 0;
  width: 100%; /* Largeur de l'écran */
  height: 100%; /* Hauteur de l'écran */
  background-color: rgba(0, 0, 0, 0.4); /* Fond semi-transparent */
  display: flex;
  justify-content: center; /* Centrage horizontal */
  align-items: center; /* Centrage vertical */
}

/* Ajustements pour conserver les proportions et centrer les boutons */
.userModal-content {
  background-color: rgb(38, 38, 38);
  backdrop-filter: blur(10pxGB); /* Flou de l'arrière-plan */
  -webkit-backdrop-filter: blur(10px); /* Pour la compatibilité avec Safari */
  margin: 15px;
  padding: 3rem;
  border-radius: 15px;
  width: 80vw; /* Largeur en fonction du viewport */
  height: auto; /* Hauteur identique à la largeur pour maintenir l'aspect carré */
  max-width: 500px; /* Largeur maximale */
  max-height: 500px; /* Hauteur maximale */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex; /* Utilisation de Flexbox pour centrer les éléments */
  flex-direction: column; /* Organise les boutons verticalement */
  justify-content: center; /* Centrage vertical des boutons */
  align-items: center; /* Centrage horizontal des boutons */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Bordure légère pour renforcer l'effet de verre */
}
.userModal-content img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.connected-modal {
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1.5rem;
  margin-top: 1rem;
}
.connected-modal p {
  text-transform: uppercase;
  font-weight: 800;
  font-family: "Press Start 2P", system-ui;
}
.connected-modal :nth-child(2) {
  background: #9a2257;
  padding: 8px;
  border-radius: 15px;
  transition: 0.2s;
}
.connected-modal :nth-child(2):hover {
  transform: scale(1.03);
}
.connected-modal :nth-child(3) {
  background: white;
  border-radius: 15px;
  padding: 8px;
  color: #9a2257;
  border: 2px solid #9a2257;
  transition: 0.2s;
}
.connected-modal :nth-child(3):hover {
  transform: scale(1.03);
}
.connected-modal :nth-child(4) {
  color: rgb(214, 71, 71);
  transition: 0.2s;
}
.connected-modal :nth-child(4):hover {
  transform: scale(1.03);
}
.connected-modal a {
  cursor: pointer;
  font-weight: 700;
  font-family: "Zen Old Mincho", sans-serif;
}

/* Style pour la croix de fermeture, inchangé */
.userClose {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #9a2257;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 1rem;
}

.userClose:hover,
.userClose:focus {
  color: #9a2257;
  text-decoration: none;
  cursor: pointer;
}

/* Style des boutons, ajusté pour centrer */
#loginBtn,
#registerBtn,
.modal-form button,
.register-button {
  display: block; /* Chaque bouton occupe sa propre ligne */
  width: auto; /* Adaptation à la largeur du contenu */
  margin: 10px; /* Marge pour les espacer verticalement */
  padding: 10px 20px; /* Padding ajusté pour une meilleure forme */
  background: #9a2257;
  color: white;
  border-radius: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  font-family: "Zen Old Mincho", sans-serif;
  font-size: clamp(8px, 2vw, 14px);
  transition: 0.2s ease-out;
  text-align: center;
  cursor: pointer;
}
#loginBtn:hover,
#registerBtn:hover,
.modal-form button:hover,
.register-button:hover {
  background: #494786;
  transform: scale(1.02);
}

/* Adaptation pour les petits écrans */
@media screen and (max-width: 500px) {
  .userModal-content {
    width: 90vw; /* Ajustement de la largeur sur les petits écrans */
  }
  .login-text {
    font-size: 2vw;
  }
  #loginBtn,
  #registerBtn {
    font-size: 2vw;
  }
}
.modal-img {
  width: 20%;
  margin-bottom: 1rem;
}

.login-text {
  text-align: center;
  margin-bottom: 1rem;
  color: white;
  font-size: clamp(12px, 2vw, 16px);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 5px;
}

.modal-form input,
.modal-form select {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  background-color: white; /* Fond blanc pour les champs */
  font-family: "Zen Old Mincho", sans-serif;
}

.back-arrow {
  font-size: 24px;
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}

.back-arrow i {
  color: white;
}

.modal-links {
  text-align: center;
  margin-top: 20px;
}

.modal-links a {
  color: white; /* Ou toute autre couleur selon votre design */
  text-decoration: underline;
  cursor: pointer;
}

.modal-links a:hover {
  text-decoration: none; /* Optionnel, pour changer le style au survol */
}

#userModal {
  display: none; /* Assurez-vous que la modal est cachée au chargement de la page */
}

/*********************** Home ************************/
.hero-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.hero-section .italic-text {
  font-style: italic;
  font-family: "Press Start 2P", system-ui;
  font-size: clamp(0.2rem, 1.5vw + 1rem, 1.1rem);
  margin-bottom: 2rem;
  text-align: center;
}
.hero-section img {
  max-width: 30%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  padding: 1.5rem;
}

.btn-hero-container {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 3rem;
}
.btn-hero-container .btn-hero {
  background: #9a2257;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  border-radius: 15px;
  padding: 1rem;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: 0.5s ease-out;
}
.btn-hero-container .btn-hero:nth-child(2) {
  border: 2px solid #9a2257;
  background: white;
  color: #9a2257;
}
.btn-hero-container .btn-hero:hover {
  background: #494786;
  transform: scale(1.09);
}

.hero-img {
  width: 500px;
}
.hero-img img {
  width: 100%;
  height: 100%;
}

.birthday {
  margin: 4rem 0;
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding: 0 10rem;
}
.posts article {
  text-align: center;
  max-width: 350px;
  margin: 0 auto;
  background: white;
  padding: 1rem;
  border-radius: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.posts article .content-birthday .see-more {
  padding: 0.8em 1em;
  border: none;
  border-radius: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  background: #9a2257;
  color: white;
  transition: 0.2s ease-out;
  font-size: clamp(0.5rem, 2vw + 1rem, 0.8rem);
  font-family: "Zen Old Mincho", sans-serif;
  text-transform: uppercase;
}
.posts article .content-birthday .see-more:hover {
  transform: scale(1.09);
  background: #494786;
}
.posts article .content-birthday p,
.posts article .content-birthday .see-more {
  margin-top: 0.9em;
}
.posts .container-birthday-img {
  width: 150px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding-bottom: 0.8rem;
}
.posts .container-birthday-img img {
  height: auto;
  object-fit: cover;
  cursor: pointer;
}

.news-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  padding: 5rem 6rem;
}
.news-container .news-card {
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  padding: 30px;
  background: white;
}
.news-container .news-card::after {
  content: "";
  display: block;
  clear: both;
}
.news-container .news-card h3 {
  margin-bottom: 10px;
}
.news-container .news-card p {
  line-height: 1.4;
}
.news-container .news-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  shape-outside: margin-box;
  margin: 0 20px 5px 0;
  object-fit: cover;
  cursor: pointer;
}

.container {
  max-width: 1300px;
  width: 100%;
  padding: 40px 0;
}

.slide-container {
  margin: 0 60px;
  overflow: hidden;
}

.card {
  background: #fff;
  border-radius: 8px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.card-wrapper {
  padding: 1rem 0;
}

.card .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
  object-fit: cover;
}

.card .profile-details {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  padding: 15px;
}

.card .profile-details img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.profile-details .name {
  font-size: 15px;
  font-weight: 500;
}

.profile-details .job {
  font-size: 12px;
  font-weight: 500;
  color: #4d4d4d;
}

.swiper {
  padding: 2rem 0 !important;
}

.swiper-navBtn {
  color: #000;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
}

.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 18px;
}

.swiper-pagination-bullet {
  background-color: #000;
}

.card-content {
  padding: 0.8rem;
}

.swiper-pagination-bullet-active {
  background: #9a2257 !important;
}

.swiper-button-next1::after,
.swiper-button-prev1::after,
.swiper-button-next2::after,
.swiper-button-prev2::after,
.swiper-button-next3::after,
.swiper-button-prev3::after {
  content: "";
  color: #9a2257;
  background: none;
}

.swiper-button-next1,
.swiper-button-prev1,
.swiper-button-next2,
.swiper-button-prev2,
.swiper-button-next3,
.swiper-button-prev3 {
  width: 80%;
  background: none;
}

@media screen and (max-width: 768px) {
  .swiper-navBtn {
    display: none;
  }
}
.container-comments {
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 750px;
  margin: 2rem auto;
  padding: 1rem;
  background: white;
}
.container-comments .game-about {
  text-align: center;
}

.container-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
}
.container-data .comments-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container-data .comments-img img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.container-data .user-name-container {
  text-align: center;
}

.date-comments .date {
  font-style: italic;
  font-size: 12px;
}

.videos {
  padding: 1rem;
}

.containerVideo {
  max-width: 1500px;
}
.containerVideo iframe {
  width: 100%;
  height: 200px;
}

.cards-container {
  --auto-grid-min-size: 12rem;
  padding: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 3rem;
  text-align: center;
}

.card-info {
  color: white;
  padding: 1rem;
}

.card-game {
  background: #494786;
  cursor: pointer;
  border-radius: 0 0 10px 10px;
}
.card-game:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

@media only screen and (max-width: 600px) {
  .cards-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .card-game {
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
  }
  .card-game img {
    width: 100%;
  }
}
.game-details-header {
  max-width: 450px;
  margin: 0 auto;
  margin-top: 100px;
}
.game-details-header .title-game-details {
  background: white;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.container-gameboy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #7f8a9e;
  border-radius: 0 0 45px 0;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  margin: 1rem;
}
.container-gameboy h1 {
  font-size: clamp(0.8rem, 2vw + 1rem, 1rem);
  font-weight: 900;
}

.add-btn-container {
  display: flex;
  justify-content: center;
}

.add__btns {
  margin: 1rem;
  background: #9a2257;
  color: white;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  font-size: clamp(0.4rem, 0.8438rem + 0.5vw, 0.6rem);
}
.add__btns:hover:hover {
  transform: scale(1.02);
  transition: 0.3s;
}
.add__btns i {
  border-radius: 0.375em;
  transition: 0.3s;
}

/** start gameboy here **/
.screen {
  margin: 0 auto;
  border-bottom-right-radius: 75px;
  padding: 1rem;
}
.screen .screen-content {
  margin-top: 30px;
  background: #84d07d;
  height: 200px;
  font-family: "Early Gameboy";
  color: #257b38;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.screen .screen-content .message-content {
  width: 100%;
  padding: 20px;
}
.screen .screen-content .message {
  display: flex;
  align-items: center;
  text-align: center;
  height: 100%;
  width: 100%;
  animation: slide-down 1s linear;
}
.screen .screen-content .message .event-text {
  color: black;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes scroll-text {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}
.container__twoBlocks {
  display: flex;
  margin: 2rem;
  gap: 2rem;
}
.container__twoBlocks .special-title {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Press Start 2P", system-ui;
  padding: 1rem;
  font-size: clamp(0.8rem, 0.8rem + 0.4vw, 1rem);
  line-height: 1.4;
}

.container-game-details-title {
  background: #494786;
  border-radius: 10px 10px 0 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
}

.container-pixel-img {
  width: 40px;
}
.container-pixel-img .pixel-img {
  width: 100%;
}

/*********** Presentation du jeu ***********/
.left__block {
  border-radius: 15px;
  width: 70%;
  display: flex;
  flex-direction: column;
}
.left__block .details-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.left__block .game-img {
  height: 200px; /* Hauteur fixe pour toutes les images */
  width: 100%; /* Largeur automatique pour maintenir le ratio d'aspect */
  object-fit: contain;
}
.left__block .swiper-button-prev:after,
.left__block .swiper-button-next:after,
.left__block .swiper-pagination-bullet-active {
  color: #9a2257;
}
.left__block .swiper-pagination-bullet-active {
  background: #9a2257;
}
.left__block li {
  list-style-type: initial;
  margin: 1.5rem;
}

.game__presentation__container,
.other__photos,
.credit__pcb,
.import,
.cover__compare,
.ingame__compare,
.version__compare,
.additional__info,
.screenshots,
.magazine__test,
.credit__container,
.pcb__container,
.timeline,
.other-versions {
  background: white;
  margin: 2rem;
  border: 2px solid #c4bebb;
  border-radius: 15px;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.infoTable,
.individual__info {
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

table.infoTable td {
  background: white;
}

.game__presentation__container {
  text-align: center;
  border-radius: 15px;
}

.game__info__container {
  margin: 2rem;
}

.game__description {
  padding: 2rem;
}

@media screen and (max-width: 850px) {
  .game__presentation__container {
    text-align: center;
  }
  .fronbox__side__container {
    display: inline-block;
  }
  .photo__frontbox {
    width: 100%;
  }
}
/*********** Presentation du jeu - Fin ***********/
/******************************************************/
/*********** Info et autres photos - Debut ***********/
/****************************************************/
.game__info__container {
  border-radius: 15px;
}

.container__table {
  display: flex;
  justify-content: space-around;
  gap: 2.5rem;
}

.individual__info,
.multiple__info {
  text-align: center;
}

table.infoTable {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table.infoTable td {
  border: 2px solid #aaaaaa;
  padding: 8px 8px;
  vertical-align: middle;
}

.company-img {
  width: 50px;
  height: auto;
}

table.infoTable td:nth-child(even) {
  background: white;
}

.container__normal__img,
.container__side__img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.other__photos {
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.other__photos .container__others__image {
  width: 180px;
}
.other__photos .container__others__image img {
  width: 100%;
  height: 200px;
}
.other__photos .container__others__image__side {
  width: 60px;
}
.other__photos .container__others__image__side img {
  width: 100%;
  height: 200px;
}
.other__photos .container__others__image__top {
  width: 180px;
}
.other__photos .container__others__image__top img {
  width: 100%;
  height: 50px;
}

@media screen and (max-width: 880px) {
  .container__table {
    display: block;
  }
  .multiple__info {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 700px) {
  table.infoTable td {
    padding: 3px 3px;
    font-size: 14px;
  }
}
/*********** Info et autres photos - Fin ***********/
/******************************************************/
/******************* Credit et pcb *******************/
/****************************************************/
/*********** Credit et pcb - Fin ***********/
.import ul,
.cover__compare ul,
.ingame__compare ul,
.version__compare ul,
.additional__info ul,
.screenshots ul,
.magazine__test ul,
.credit__container ul,
.pcb__container ul {
  padding: 1rem;
}

/******************************************************/
/******************* autres bloc *******************/
/****************************************************/
.screenshots .container__screenshots {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.screenshots .container__screenshots .screenshots__image {
  width: 180px;
}
.screenshots .container__screenshots .screenshots__image img {
  width: 100%;
  height: 200px;
}

/**************************************************/
/************** Bloc de droite********************/
/************************************************/
.right__block {
  border-radius: 15px;
  width: 30%;
  text-align: center;
}

.other-versions-container {
  max-width: 200px;
  margin: 2rem auto;
  background: #c4bebb;
  border-radius: 0 0 10px 10px;
}
.other-versions-container a {
  cursor: pointer;
}
.other-versions-container .other-versions-details {
  padding: 0.8rem;
  font-weight: 600;
}

.timeline {
  background: white;
  border-radius: 15px;
  margin: 2rem;
}
.timeline h4 {
  border-radius: 12px 12px 0px 0px;
  padding: 1rem;
  text-align: center;
}

.container-scroll-other-versions {
  max-height: 400px;
  overflow-y: scroll;
}

.panel-heading {
  padding: 2rem;
}

.container__comments {
  text-align: center;
}

.text__zone {
  display: flex;
  flex-direction: column;
  margin: 2rem;
  gap: 1rem;
}
.text__zone textarea {
  background: white;
}

.textelist {
  padding: 0.8rem;
}

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

@media screen and (max-width: 680px) {
  .left__block,
  .right__block {
    width: 100%;
    text-align: center;
  }
}
.register-body {
  overflow: hidden;
  background: white;
}

.register-block {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
}
.register-block .register-img {
  position: relative;
  width: 50%;
  height: 100%;
}
.register-block .register-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.register-block .register-content {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 4rem;
}
.register-block .register-content .form-title {
  border-bottom: 2px solid #9a2257;
  padding: 1rem;
  margin-bottom: 0.8rem;
}
.register-block .register-content .success-message {
  background: #84d07d;
  color: white;
  padding: 8px;
  border-radius: 15px;
}
.register-block .register-content .error-message {
  background: rgb(170, 3, 3);
  color: white;
  padding: 8px;
  border-radius: 15px;
}
.register-block .register-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 20px;
  background: white;
  width: 100%;
  height: 450px;
  margin: 2rem;
  background: white;
  font-family: "Zen Old Mincho", sans-serif;
}
.register-block .register-form input[type=text],
.register-block .register-form input[type=password],
.register-block .register-form input[type=email],
.register-block .register-form select {
  padding: 5px;
  border-radius: 25px;
  border: 2px solid #ccc;
}
.register-block .register-form input[type=file] {
  border: none;
}
.register-block .register-button {
  background-color: #9a2257;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  margin: 0;
}
.register-block .register-button:hover {
  background: #494786;
}
@media (max-width: 768px) {
  .register-block .register-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .register-block .register-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 18%, rgba(255, 255, 255, 0.7) 75%);
    z-index: 1;
    mix-blend-mode: screen;
  }
  .register-block .register-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    z-index: 1;
  }
  .register-block .register-form {
    border-radius: 15px;
  }
}

.integration {
  margin-top: 150px;
}

.block-data {
  border-radius: 15px;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  margin: 0 auto;
  background: white;
}

.database-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 2rem;
  padding: 2rem;
  margin: 2rem;
}

.database-title-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.database-title-content h2,
.database-title-content p {
  margin-bottom: 10px;
}
.database-title-content h2 {
  font-size: calc(12px + 0.7vw);
}
.database-title-content p {
  font-size: clamp(0.5rem, 0.8rem + 0.4vw, 1rem);
}

.see-more {
  background: #9a2257;
  color: white;
  padding: 0.8rem;
  border-radius: 25px;
  text-transform: uppercase;
  transition: 0.2s;
  cursor: pointer;
  margin-top: 1rem;
  font-size: clamp(0.6rem, 0.5rem + 0.5vw, 0.8rem);
  font-family: "Zen Old Mincho", sans-serif;
}
.see-more:hover {
  background: #494786;
  transform: scale(1.02);
}

.database-img {
  width: 150px;
}
.database-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

@media only screen and (max-width: 783px) {
  .block-data {
    margin: 0 auto;
    max-width: 500px;
    margin-bottom: 1.5rem;
  }
  .container-blocks {
    display: block;
  }
}
@media only screen and (max-width: 500px) {
  .database-img {
    width: 100px;
  }
  .database-img img {
    width: 100%;
    height: 100%;
  }
  .block-data {
    max-width: 100%;
  }
  .container-blocks {
    padding: 8px;
  }
}
@media only screen and (max-width: 350px) {
  .database-container {
    flex-direction: column;
  }
  .database-img {
    width: 100%;
  }
}
.team-title {
  margin-bottom: 8rem;
}

.team-cards {
  --auto-grid-min-size: 20rem;
  padding: 3rem 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 5rem;
  text-align: center;
}

.project-team-title {
  text-align: center;
  margin: 2rem;
}

.card-content-container {
  padding: 1.5rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.team-card .team-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}
.team-card img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.team-card .team-detail {
  text-align: center;
}
.team-card .team-detail h3 {
  margin-bottom: 8px;
}
.team-card .team-socials {
  background: #494786;
  width: 100%;
  padding: 1rem;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.team-card .team-socials a {
  cursor: pointer;
}
.team-card .team-socials i {
  font-size: 1.5rem;
  color: white;
}
.team-card .team-socials i:hover {
  transform: scale(1.1);
  transition: 0.2s;
  color: #c4bebb;
}

/*********************** Layouts ************************/
.container-nav-user {
  display: flex;
  align-items: center;
}

.container-user {
  cursor: pointer;
  transition: 0.2s ease-in-out;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.5rem;
}
.container-user img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.container-user:hover .fa-user {
  transform: scale(1.05);
  background: white;
  color: #9a2257;
}
.container-user .success-message {
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Press Start 2P", system-ui;
}

@media (max-width: 500px) {
  .container-user img {
    width: 35px;
    height: 35px;
  }
  .success-message {
    font-size: 2.5vw;
  }
}
.fa-user {
  padding: 0.6rem;
  border-radius: 50%;
  color: white;
  background: #9a2257;
  transition: 0.2s ease-in-out;
}

/* Navbar scroll animation*/
nav.scrolled {
  background-color: #494786;
  height: 90px;
}

nav .logo img,
nav .logo-main img {
  transition: transform 0.5s ease;
}

nav.scrolled .logo img,
nav.scrolled .logo-main img {
  transform: scale(0.8);
}

/* End */
nav.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  padding: 1em 5em;
  top: 0;
  height: 100px;
  transition: background-color 0.5s ease;
}

.logo img {
  width: 250px;
}

.logo-main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-main img {
  width: 300px;
}

.toggle-btn {
  display: flex;
  justify-content: flex-end;
  padding: 0 1.5em;
}

.burger {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 1.5em;
  background: #9a2257;
  border-radius: 0.25em;
  outline: none;
  height: 20px;
  width: 28px;
  border: none;
  transition: all 250ms ease-out;
  cursor: pointer;
}

.burger:before,
.burger:after {
  content: "";
  width: 28px;
  height: 1.5px;
  position: absolute;
  background: white;
  transition: all 250ms ease-out;
  will-change: transform;
}

/********* animation on hamburger **************/
.burger:before {
  transform: translateY(-3px);
}

.burger:after {
  transform: translateY(3px);
}

.active.burger:before {
  transform: translateY(0) rotate(45deg);
}

.active.burger:after {
  transform: translateY(0) rotate(-45deg);
}

.burger:hover {
  background: rgb(255, 255, 255); /* Change le background de .burger en blanc */
}

.burger:hover:before,
.burger:hover:after {
  background: #9a2257;
}

/********* Menu overlay **************/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.block {
  flex: 1;
  height: 100%;
  background: #494786;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  margin-right: -2px;
}

.overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 8em 1em;
}

.overlay,
.overlay-menu {
  z-index: -1;
}

.menu-item,
.menu-title,
.search-bar {
  width: 100%;
  opacity: 0;
}

.menu-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-title p {
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw + 1rem, 1.5rem);
}

.menu-item {
  display: flex;
  justify-content: center;
  padding: 0.4em;
  transition: 0.3s;
  cursor: pointer;
}

.menu-item-year,
.menu-item-link {
  flex: 1;
}

.menu-item-link {
  text-align: right;
}

.menu-item-name.active .sub-menu {
  display: block;
}

.menu-item ul {
  list-style-type: none;
  margin: 0.4rem 0;
  padding: 0;
  gap: 15px;
}

.part {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-part1,
.list-part2 {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}
.list-part1 a,
.list-part2 a {
  position: relative;
  background: white;
  padding: 0.5rem;
  border-radius: 8px;
  color: black;
  transition: 0.2s ease-in-out;
}
.list-part1 a:hover,
.list-part2 a:hover {
  background: rgb(231, 231, 231);
  transform: scale(1.01);
}

/*carré fullset*/
.fullsetList-part1,
.fullsetList-part2,
.fullsetList-part3,
.fullsetList-part4 {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.fullsetList-part1 a,
.fullsetList-part2 a,
.fullsetList-part3 a,
.fullsetList-part4 a {
  position: relative;
  background: white;
  padding: 0.5rem;
  border-radius: 8px;
  color: black;
  transition: 0.2s ease-in-out;
}
.fullsetList-part1 a:hover,
.fullsetList-part2 a:hover,
.fullsetList-part3 a:hover,
.fullsetList-part4 a:hover {
  background: rgb(231, 231, 231);
  transform: scale(1.01);
}

#fullset-list .fullsetList-part1 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
#fullset-list .fullsetList-part1 a:nth-child(1)::after {
  background-color: yellow;
}
#fullset-list .fullsetList-part1 a:nth-child(2)::after {
  background-color: rgb(105, 22, 22);
}
#fullset-list .fullsetList-part1 a:nth-child(3)::after {
  background-color: rgb(37, 146, 4);
}
#fullset-list .fullsetList-part1 a:nth-child(4)::after {
  background-color: rgb(211, 211, 211);
}
#fullset-list .fullsetList-part1 a:nth-child(5)::after {
  background-color: rgb(128, 72, 12);
}
#fullset-list .fullsetList-part1 a:nth-child(6)::after {
  background-color: pink;
}
#fullset-list .fullsetList-part2 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
#fullset-list .fullsetList-part2 a:nth-child(1)::after {
  background-color: rgb(151, 116, 116);
}
#fullset-list .fullsetList-part2 a:nth-child(2)::after {
  background-color: orangered;
}
#fullset-list .fullsetList-part2 a:nth-child(3)::after {
  background-color: rgb(228, 34, 83);
}
#fullset-list .fullsetList-part2 a:nth-child(4)::after {
  background-color: rgb(14, 154, 197);
}
#fullset-list .fullsetList-part3 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
#fullset-list .fullsetList-part3 a:nth-child(1)::after {
  background-color: #0e0e0e;
}
#fullset-list .fullsetList-part3 a:nth-child(2)::after {
  background-color: rgb(0, 0, 170);
}
#fullset-list .fullsetList-part3 a:nth-child(3)::after {
  background-color: rgb(67, 165, 211);
}
#fullset-list .fullsetList-part3 a:nth-child(4)::after {
  background-color: rgb(216, 216, 216);
}
#fullset-list .fullsetList-part4 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
#fullset-list .fullsetList-part4 a:nth-child(1)::after {
  background-color: rgb(0, 0, 102);
}
#fullset-list .fullsetList-part4 a:nth-child(2)::after {
  background-color: yellow;
}
#fullset-list .fullsetList-part4 a:nth-child(3)::after {
  background-color: rgb(100, 168, 100);
}
#fullset-list .fullsetList-part4 a:nth-child(4)::after {
  background-color: rgb(155, 155, 155);
}

.items__sub__list {
  font-size: clamp(10px, 2vw, 14px);
  text-transform: uppercase;
}

.container-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.title-list {
  text-transform: uppercase;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: clamp(14px, 3vw, 24px);
}

#zoom .list-part1,
#zoom .list-part2 {
  display: flex;
  text-align: center;
}

.rotate {
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}

/*********** transition liste *************/
/* Début de l'animation des listes déroulantes */
.toggle-content {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s;
}

.toggle-content:not(.hidden) {
  max-height: 500px; /* Ajustez cette valeur selon le contenu maximal que vous attendez */
  visibility: visible;
  opacity: 1;
}

/* Fin de l'animation des listes déroulantes */
/********** SearchBar **********/
.search-bar {
  display: flex;
  justify-content: center;
  margin: 2em;
  color: black;
}
.search-bar input {
  background: white;
  border-radius: 15px 0 0 15px;
}
.search-bar button {
  background: #9a2257;
  border-radius: 50%;
  cursor: pointer;
}
.search-bar button i {
  color: white;
  font-size: 1rem;
}
.search-bar input,
.search-bar button {
  padding: 1em;
}

.search-bar input[type=text] {
  transition: width 0.5s ease;
  width: 0;
  border: none;
  padding: 1em 0;
  cursor: pointer;
  outline: none;
}

.search-bar input[type=text].expanded {
  width: 300px;
  height: 50px;
  padding: 1em;
  border: 1px solid #ddd;
  cursor: text;
  font-size: clamp(1rem, 1vw + 0.5rem, 1.3rem);
  font-family: "Poppins", sans-serif;
}

.search-bar button {
  transition: border-radius 0.5s ease;
  height: 50px;
}

.search-bar button.submit-button {
  border-radius: 0 15px 15px 0;
}

/*********************** Responsive ************************/
/************************* Tablette ****************************/
@media (max-width: 1024px) {
  .hero-section {
    flex-direction: column-reverse;
    margin-top: 150px;
    height: auto;
  }
  .hero-section img {
    max-width: 25%;
  }
  .posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
    padding: 0 3rem;
  }
  .posts .container-birthday-img {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .posts .container-birthday-img img {
    width: 200px;
  }
  .news-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 4rem 2rem;
  }
  .news-container .news-card img {
    width: 120px;
    height: 120px;
    margin-bottom: 1rem;
  }
  .container__twoBlocks {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
  }
  .container__twoBlocks .container__table {
    flex-direction: column;
  }
  .left__block,
  .right__block {
    width: 100%;
    box-shadow: none;
  }
}
/************************* Large Mobile Screen ****************************/
@media only screen and (max-width: 767px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
  }
  .posts .container-birthday-img {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .posts .container-birthday-img img {
    width: 180px;
  }
  .container-comments {
    max-width: 400px;
  }
  .container-data {
    flex-direction: column;
  }
  .comments-content {
    text-align: center;
  }
  nav {
    padding: 1em 2em;
  }
  .doubleLines::before,
  .doubleLines::after {
    width: 80px;
  }
}
/************************* Small Mobile Screen ****************************/
@media only screen and (max-width: 500px) {
  .logo img {
    width: 120px;
  }
  nav {
    padding: 0.8rem;
  }
  .overlay-menu {
    top: 26px;
  }
  #zoom {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #zoom .list-part1,
  #zoom .list-part2 {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .hero-section {
    margin-top: 100px;
  }
  .hero-section h1 {
    font-size: 5vw;
  }
  .posts {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .posts .container-birthday-img img {
    width: 200px;
  }
  .news-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .news-container .news-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .news-container .news-card img {
    margin: 1rem 0;
  }
  .container-comments {
    max-width: 300px;
  }
  .container-data {
    flex-direction: column;
  }
  .container-data .comments-img img {
    width: 50px;
    height: 50px;
  }
  .team-cards {
    --auto-grid-min-size: 10rem;
  }
  .team-cards .team-card .team-image {
    width: 80px;
    height: 80px;
  }
  .game__presentation__container,
  .other__photos,
  .credit__pcb,
  .import,
  .cover__compare,
  .ingame__compare,
  .version__compare,
  .additional__info,
  .screenshots,
  .magazine__test,
  .credit__container,
  .pcb__container,
  .timeline,
  .other-versions,
  .game__info__container {
    margin: 0.8rem;
  }
  .youtube-game-details {
    width: 100%;
    height: auto;
  }
  .container-gameboy h1 {
    font-size: 3vw;
  }
  .game-details-header {
    max-width: 350px;
  }
  .screen .screen-content {
    height: 100px;
  }
  .add__btns {
    font-size: 2vw;
  }
  #about .list-part1 {
    flex-direction: column;
    text-align: center;
  }
  .doubleLines::before,
  .doubleLines::after {
    width: 40px;
  }
}
@media only screen and (max-width: 350px) {
  .container-game-details-title {
    flex-direction: column;
  }
  .container-game-details-title h3 {
    font-size: 3.5vw !important;
  }
  .search-bar input[type=text].expanded {
    width: 150px;
  }
}

//ajouts guigui48

.profile img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.formsearch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.formsearch:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.formsearch input:checked ~ .checkmark {
  background-color: #b51ee6;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.formsearch input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.formsearch .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.lienjoli a
{
  font-size: clamp(1rem, 0.8438rem + 0.5vw, 1.125rem);
  font-family: "Zen Old Mincho", sans-serif;
  line-height: 1.4;
font-weight: bolder;	
 text-decoration: none;
}
.lienjoli a:before
{
content: "";
    display: block;
    background: url("images/puce.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}
.multiple_infos 
{
text-decoration : none;
}
.contribution
{
	-webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50%;
    max-width:90px;
    max-height:90px;
	clip-path:ellipse(50% 50%);
}




.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 340px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close {
background: #9a2257;
color: #FFFFFF;
line-height: 15px;
text-align: center;
float: right;
width: 15px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

.zone-explanation {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3rem;
  padding: 5rem 6rem;
}
.zone-explanation .news-card {
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  padding: 30px;
  background: white;
}
.zone-explanation .news-card::after {
  content: "";
  display: block;
  clear: both;
}
.zone-explanation .news-card h3 {
  margin-bottom: 10px;
}
.zone-explanation .news-card p {
  line-height: 1.4;
}
.zone-explanation .news-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  shape-outside: margin-box;
  margin: 0 20px 5px 0;
  object-fit: cover;
  cursor: pointer;
}