body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-image: url('bg-feuille.jpg');
    background-size: 100% auto;
    /* Adapte la largeur de l'image à 100% de la fenêtre */
    background-repeat: no-repeat;
    /* Pour éviter que l'image ne se répète */
    background-position: center top;
    /* Positionne l'image au centre en haut */
    background-color: #ffc59f;
    /* Couleur de fond pour les espaces non couverts par l'image */
}

* {
    box-sizing: border-box;
}

a {
    color: darkorange;
}

a:hover {
    color: #ff4500;
    /* Une teinte légèrement différente lors du survol du lien */
}

header {
    background-color: rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    padding: 20px 0;
    text-align: center;
    border-top: solid 5px darkorange;
    position: relative;
}

.logo-container {
    padding: 10px;
}

.logo-container img {
    border-radius: 0px;
}

.language-selector {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1000;
}

.current-lang,
.other-langs {
    display: block;
}

.current-lang img,
.other-langs a img {
    width: 25px;
    /* Modifiez cette valeur pour ajuster la largeur des drapeaux */
    height: auto;
    /* Ajuste automatiquement la hauteur pour maintenir les proportions */
    cursor: pointer;
    display: block;
    /* Assure que les images sont affichées correctement */
    margin: 0px 5px 0px 5px;
}

.other-langs {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /* Positionne le sous-menu juste en dessous du drapeau actuel */
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 0px 5px 0px 5px;
    z-index: 999;
}

.current-lang:hover+.other-langs,
.other-langs:hover {
    display: block;
}

.other-langs a {
    display: block;
    margin: 10px 0;
    text-align: center;
    /* Centre les images dans les liens */
}



img {
    border-radius: 20px;
}


#logo {
    width: 100px;
    height: auto;
}

nav {
    background-color: rgba(255, 165, 0, 0.2);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    /* Affiche les éléments verticalement par défaut */
    align-items: center;
    /* Centrer les liens verticalement */
}

nav a {
    margin: 5px 0;
    /* Espacement vertical entre les boutons */
    padding: 10px 20px;
    color: white;
    background-color: darkorange;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-align: center;
    /* Centrer le texte des liens */
    width: 100%;
    /* Prendre toute la largeur disponible */
    max-width: 300px;
    /* Limiter la largeur maximale */
}

nav a:hover {
    background-color: #f2f2f2;
    color: darkorange;
    /* Changer la couleur du texte au survol pour qu'il soit lisible */
}

/* Media query pour les écrans d'une largeur d'au moins 768px */
@media (min-width: 768px) {
    nav {
        flex-direction: row;
        /* Affiche les éléments horizontalement */
        justify-content: center;
        /* Centrer les liens horizontalement */
    }

    nav a {
        margin: 0 10px;
        /* Espacement horizontal entre les boutons */
        width: auto;
        /* Réinitialiser la largeur */
    }
}

.conteneur {
    display: flex;
    justify-content: center;
}

.feuille {
    background-color: white;
    width: 80%;
    padding: 40px;
    margin-top: 20px;
    /* Ajout de la marge en haut */
    margin-bottom: 40px;
    /* Ajout de la marge en bas */
    border-radius: 20px 20px 40px 40px;
}

@media (max-width: 768px) {
    .feuille {
        padding: 20px;
        /* Réduction du padding pour les écrans mobiles */
        width: 90%;
        margin-top: 20px;
        /* Ajout de la marge en haut */
        margin-bottom: 20px;
    }

    img {
        border-radius: 2px;
        /* Réduction du border-radius pour les images sur mobile */
    }
}


.gray-box {
    background-color: #f0f0f0;
    /* Couleur de fond gris clair */
    padding: 20px;
    /* Espacement intérieur pour un peu d'espace autour du contenu */
    border-radius: 10px;
    /* Bords légèrement arrondis pour un look moderne */
}


h1 {
    font-size: 2.5em;
    margin: 0px;
    text-align: center;
    background-color: #FFEBE6;
    /* Ceci est un orange très clair. */
    border-radius: 10px;
    padding: 10px;
}


h2 {
    position: relative;
    /* nécessaire pour le positionnement absolu du pseudo-élément */
    color: darkorange;
    font-size: 2em;
}

h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 100%;
    /* commence juste après le h2 */
    border-top: 1px solid darkorange;
    /* utilisez la couleur que vous souhaitez pour la ligne */
}


h3 {
    color: darkgray;
    /* ou utilisez une valeur hexadécimale précise comme #A9A9A9 pour un gris foncé */
    font-size: 1.5em;
}


p {
    line-height: 1.8;
    font-size: 20px;
}

ul {
    list-style-type: none;
    /* Supprime les puces */
    padding: 0;
    /* Supprime le padding par défaut */
    margin: 20px 0;
    /* Ajoute une marge au-dessus et en dessous de la liste */
    line-height: 1.5;
    /* Augmente l'interligne des listes à puces */
    font-size: 18px;
}


li {
    padding-left: 30px;
    /* Espace à gauche pour notre puce personnalisée */
    position: relative;
    /* Permet de positionner notre puce par rapport à cet élément */
    margin-bottom: 10px;
    /* Espace entre chaque élément de la liste */
    font-weight: normal;
    /* Assure que le texte a une épaisseur normale, au cas où d'autres styles affecteraient cela */
    line-height: 1.5;
}

li::before {
    content: '■';
    /* Ceci est une entité pour un petit carré, qui sera notre puce personnalisée */
    position: absolute;
    /* Positionnement absolu par rapport à l'élément de liste */
    left: 10px;
    /* Place la puce un peu à droite depuis le bord gauche de l'élément li */
    color: darkorange;
    /* La couleur de notre puce */
    font-size: 1em;
    /* Taille de la puce */
    top: 50%;
    /* Centré verticalement */
    transform: translateY(-50%);
    /* Ajustement pour s'assurer qu'il est parfaitement centré */
}

footer {
    background-color: #333;
    padding: 10px 0;
    text-align: center;
    color: white;
}

.presentation-general {
    width: 80%;
    display: flex;
    /* Ajout de flex */
    padding: 30px 0;
    margin: 30px 0;
    align-items: flex-start;
}


@media (max-width: 768px) {
    .presentation-general {
        padding: 20px 0;
        margin: 20px 0;
        width: 80%;
    }
}

.mobile-frame {
    width: 512px;
    /* Largeur de l'image + 2 * 14px (les bords) */
    padding: 15px 15px;
    /* Espace pour le haut/bas et les côtés du téléphone */
    background-color: #000;
    /* La couleur du téléphone */
    border-radius: 36px;
    /* Pour rendre les coins du téléphone arrondis */
    position: relative;
    margin-right: 20px;
}

.mobile-frame::before {
    content: '';
    /* Crée la "encoche" du téléphone */
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 8px;
    border-radius: 4px;
    background-color: #000;
}

.mobile-frame::after {
    content: '';
    /* Crée le "notch" du téléphone sur le côté droit */
    position: absolute;
    right: 20px;
    /* La même valeur que le padding à droite pour qu'il soit centré sur la bordure noire */
    top: 50%;
    /* Centré verticalement */
    transform: translateY(-50%);
    /* Déplace le notch vers le haut de 50% de sa propre hauteur pour le centrer parfaitement */
    width: 3px;
    /* Largeur du notch */
    height: 100px;
    /* Hauteur du notch */
    background-color: #333;
    /* Couleur gris foncé du notch */
}


.tarot-img {
    width: 484px;
    display: block;
    border-radius: 20px;
}

.general-info {
    flex: 1;
    /* Cela permet au contenu à droite de l'image d'occuper tout l'espace restant */
    color: white;
    /* Texte en blanc pour titre et description */
}

.general-info h1 {
    font-size: 3.5em;
    text-align: center;
    margin-top: 0;
    color: white;
    background-color: transparent;
    /*animation: colorChange 5s infinite;  /* Ici, 5s pour un effet lent. Ajustez selon vos besoins. */
}


@keyframes colorChange {

    0%,
    100% {
        color: white;
    }

    50% {
        color: deepskyblue;
    }
}


.tarot-buttons {
    display: flex;
    gap: 20px;
    /* Espace entre les boutons. Si 'gap' ne fonctionne pas (dépend de la version du navigateur), utilisez des marges */
}

.tarot-buttons a {
    color: darkorange;
    background-color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.tarot-buttons a:hover {
    color: white;
    background-color: darkorange;
}


.tarot-buttons-int {
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne suivante si l'espace horizontal est insuffisant */
    gap: 20px;
    text-align: center;
    width: 100%;
}

.tarot-buttons-int a {
    color: white;
    background-color: darkorange;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.tarot-buttons-int a:hover {
    color: darkorange;
    background-color: lightgrey;
}

.tarot-presentation img {
    max-width: 100%;
    /* Image ne dépasse pas sa zone parente */
    height: auto;
    /* Conserve les proportions de l'image */
    border-radius: 10px;
    float: left;
    /* L'image flotte à gauche */
    margin-right: 20px;
}

.tarot-content {
    overflow: hidden;
    /* Claire les flottants */
}

/* Pour les écrans plus petits, où l'espace est limité */
@media (max-width: 768px) {
    .tarot-presentation img {
        float: none;
        /* Retire le flottement de l'image */
        display: block;
        /* Prend toute la largeur disponible */
        margin: 0 auto;
        /* Centre l'image horizontalement */
    }

    .tarot-content h1 {
        margin-top: 20px;
        /* Ajoute de l'espace au-dessus du titre pour les écrans plus petits */
    }
}


/* ... Autres styles ... */

@media (max-width: 768px) {
    .presentation-general {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tarot-img {
        width: 100%;
        /* Sur les petits écrans, l'image occupera toute la largeur de son conteneur */
        max-width: 512px;
        /* Mais ne dépassera pas 512px */
        margin-right: 0;
        /* Retire l'espace à droite de l'image */
        margin-bottom: 20px;
        /* Ajoute un espace sous l'image pour éviter que le texte ne soit trop proche */
    }

    .general-info h1 {
        text-align: center;
        /* Centre le titre sur mobile */
    }
}


/* Style pour la section screenshots-tarot */
#screenshots-game {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

.screenshot-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: no-wrap;
    /* Assurez-vous que les images ne passent pas à la ligne suivante */
    padding: 20px 20px 0px 20px
}

.screenshot-wrapper img {
    width: calc((100% - 80px) / 5);
    height: auto;
    margin-left: 10px;
    /* Appliquez une marge seulement à gauche par défaut */
    border-radius: 20px;
}

.screenshot-wrapper img:first-child {
    margin-left: 0;
    /* Annulez la marge pour la première image */
}

.screenshot-wrapper img:last-child {
    margin-right: 0;
    /* Annulez la marge pour la dernière image si nécessaire */
}



/* Réactif pour les petits écrans */
@media (max-width: 768px) {
    .screenshot-wrapper img {
        max-width: calc(33.33% - 20px);
        /* 3 images en ligne */

    }

    .screenshot-wrapper img {
        border-radius: 2px;
        /* Réduction du border-radius pour les images dans .screenshot-wrapper sur mobile */
    }
}

@media (max-width: 480px) {
    .screenshot-wrapper img {
        max-width: calc(50% - 20px);
        /* 2 images en ligne */
    }
}

/* CSS pour la section du jeu */
.game-section {
    margin-top: 40px;
    display: flex;
    /* Utilise flexbox pour le centrage */
    justify-content: center;
    /* Centre horizontalement */
    align-items: center;
    /* Centre verticalement */
    overflow: hidden;
    /* Pour éviter tout débordement accidentel */
}

.game-section iframe {
    width: 1136px;
    height: 640px;
    border: none;
    border-radius: 40px;
}

/* CSS pour cacher la section sur les écrans de moins de 1024 pixels */
@media (max-width: 1136px) {
    .game-section {
        display: none;
        /* Cache la section */
    }
}

/* Cachez les icônes sur les écrans de taille inférieure à 768px */
@media (max-width: 640px) {
    .hide-on-mobile {
        display: none;
    }
}

/* Styles pour le formulaire */
.form-control {
    width: 100%;
    padding: 10px 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
}

.form-control::placeholder {
    color: gray;
}

.form-control:focus::placeholder {
    color: transparent;
    /* Cache le texte du placeholder lors du focus */
}

.form-control:focus {
    outline: none;
}

textarea.form-control {
    resize: vertical;
}

button.submit-btn {
    background-color: darkorange;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    /* Effet de transition pour le survol */
}

button.submit-btn:hover {
    background-color: white;
    color: darkorange;
}

/* Styles pour les messages d'erreur et de succès */
.message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
}

.error-message {
    background-color: #FFD1D1;
    /* Rouge clair */
    color: #D12B2B;
    /* Rouge foncé */
}

.success-message {
    background-color: #D1FFD6;
    /* Vert clair */
    color: #2BD129;
    /* Vert foncé */
}

/* Styles pour le bouton "Envoyer" */
.submit-button {
    display: block;
    /* Rend le bouton en mode bloc pour le centrage */
    margin: 20px auto;
    /* Centrer horizontalement et ajouter de l'espace en haut et en bas */
    padding: 10px 20px;
    color: white;
    background-color: darkorange;
    text-decoration: none;
    font-weight: bold;
    border: none;
    /* Supprime les bordures par défaut des boutons */
    border-radius: 5px;
    transition: background-color 0.3s;
    width: 50%;
    /* Largeur à 50% du conteneur */
    cursor: pointer;
    /* Changer le curseur en main lors du survol */
}

.submit-button:hover {
    background-color: #f2f2f2;
    color: darkorange;
}


.footer-section {
    width: 100%;
    background: #2a2a2a;
    /* couleur de fond, ajustez-la à votre préférence */
    padding: 20px 0;
    border-top: 5px solid darkorange;
    background-image: url('bg.jpg');
    border-bottom: 1px solid grey;
}

.container {
    max-width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-col {
    flex-basis: calc(25% - 20px);
    margin-right: 20px;
    box-sizing: border-box;
}

.footer-col:last-child {
    margin-right: 0;
}

.footer-col h3 {
    color: white;
    margin-top: 0;
    text-align: left;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: white;
    text-decoration: none;
}

.footer-logo {
    display: block;
    margin: 0 auto;
    width: 115px;
}

.social-links a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 10px;
    align-items: center;
}

.social-links i {
    margin-right: 10px;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .footer-col {
        flex-basis: 100%;
        margin-bottom: 20px;
    }
}


.parallax {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Pour que les cartes restent derrière le contenu */
    overflow: hidden;
    /* Pour cacher les images hors de l'écran */
}

.card {
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: center;
    will-change: transform;
    /* Pour optimiser les animations */
    transition: transform 2s;
    pointer-events: none;
    /* Cela empêchera les cartes de bloquer d'autres éléments interactifs */
    z-index: -1;
}

.card1 {
    left: 5%;
    top: 10%;
    transform: translateY(-50%) scale(0.6) rotate(-15deg);
    filter: blur(0px);
    opacity: 0.5;
}

.card2 {
    left: 5%;
    top: 50%;
    transform: translateY(-50%) scale(0.8) rotate(20deg);
    filter: blur(0px);
    opacity: 1;
}

.card3 {
    right: 25%;
    top: 20%;
    transform: translateY(50%) scale(0.5) rotate(-15deg);
    filter: blur(0px);
    opacity: 0.3;
}

.card4 {
    left: 5%;
    bottom: 10%;
    transform: translateY(50%) scale(1) rotate(15deg);
    filter: blur(1px);
    opacity: 1;
}

@media (max-width: 768px) {
    .parallax {
        display: none;
    }
}

@media (max-width: 600px) {
    .tarot-buttons-int {
        flex-direction: column;
        /* Change la disposition des éléments en colonne */
        align-items: center;
        /* Centre les éléments */
    }

    .tarot-buttons-int a {
        width: 90%;
        /* Augmente la largeur des boutons pour mieux s'adapter à l'espace disponible */
        padding: 15px 20px;
        /* Augmente le padding pour de plus gros boutons, plus faciles à cliquer */
        font-size: larger;
        /* Augmente la taille de la police pour une meilleure lisibilité */
    }
}


table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: 'Arial', sans-serif;
    border: 4px solid #ff9800;
    line-height: 1.5;
    /* Interligne ajusté */
}

th,
td {
    text-align: left;
    padding: 12px 15px;
    vertical-align: top;
    /* Alignement vertical en haut pour les titres de la colonne des aspects */
}

th {
    background-color: #ff9800;
    color: #ffffff;
    font-size: 16px;
}

td {
    border-bottom: 1px solid #dddddd;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Première colonne avec une déclinaison d'oranges clairs */
td:first-child {
    background-color: #ffe0b2;
}

.tarot-card {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

.card-image,
.card-description {
    flex: 1;
}

.card-image img {
    display: block;
    max-width: 100px;
    /* Adjust based on your preference */
    border-radius: 10px;
    margin-right: 10px;
}

.card-description {
    flex: 3;
}

h4 {
    margin-top: 0;
}

#dual-row-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Ceci crée un espacement de 20px entre les images et les lignes */
    padding: 20px 20px 0px 20px;
    /* Padding autour de l'ensemble du conteneur pour maintenir l'espacement aux bords */
    justify-content: center;
    /* Centre les images, utile si la largeur totale ne remplit pas le conteneur */
}

.image-row-wrapper {
    width: 100%;
    /* S'assure que le wrapper prend toute la largeur */
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    /* Espacement entre les images */
}

.image-row-wrapper img {
    width: calc((100% - 40px) / 3);
    /* Ajuste la largeur des images */
    height: auto;
}


/* Style pour les box de jeux */
.jeu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* ou 'space-between' selon le besoin */
    width: 80%;
    margin: 0 auto;
    gap: 20px;
    /* Espacement constant entre les éléments */
}

.jeu {
    flex: 1 1 calc(33.33% - 20px);
    /* Ajustement pour inclure le gap dans le calcul */
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
}

.jeu img {
    width: 100%;
    height: auto;
    /* Laisse l'image s'ajuster naturellement à sa hauteur */
    object-fit: contain;
    /* Assure que l'image ne sera pas coupée */
    border-radius: 0px;
}


.jeu-info {
    padding: 20px;
    text-align: center;
    /* Texte centré pour le titre et la description */
    border-top: 6px solid darkorange;
}

.jeu-info h2,
.jeu-info p,
.jeu-info .btn {
    margin-bottom: 20px;
    /* Espacement entre les éléments */
}

.jeu-info h2::after {
    content: none;
}

.btn {
    width: 60%;
    /* Largeur des boutons */
    margin: 0 auto;
    /* Centrage horizontal */
    display: block;
    /* Affichage en block pour forcer le centrage */
    padding: 20px;
    border-radius: 5px;
    /* Bords arrondis des boutons */
    border: none;
    /* Suppression du contour */
    box-shadow: none;
    /* Suppression de l'ombrage */
    font-size: 1.3em;
    /* Taille de la police */
    cursor: pointer;
    font-weight: bold;
}

.jouer {
    background-color: darkorange;
    /* Couleur de fond pour le bouton Jouer */
    color: white;
}

.android {
    background-color: #4CAF50;
    /* Bouton Android en vert */
    color: white;
    /* Texte blanc */
}

.ios {
    background-color: #000000;
    /* Bouton iOS en noir */
    color: white;
    /* Texte blanc */
}

.off {
    background-color: #CFCFCF;
    /* Couleur de fond pour le bouton Jouer */
    color: darkgrey;
}

@media (max-width: 768px) {
    .jeu-container {
        width: 90%;
        /* Ajuste la largeur du conteneur sur les appareils mobiles */
        gap: 10px;
        /* Réduit l'espacement entre les boîtes pour les petits écrans */
    }

    .jeu {
        /* Ajuste la flex-basis pour une box par ligne */
        flex-basis: calc(100% - 10px);
        /* S'assure que l'espacement est pris en compte même pour une seule boîte par ligne */
    }

    .btn {
        width: 90%;
        /* Conserve la largeur augmentée des boutons pour une meilleure accessibilité */
    }
}

/* Masque le bouton Menu sur les écrans plus larges et affiche-le sur les écrans mobiles */
#menu-btn {
    display: none;
    /* Masque par défaut */
}

@media (max-width: 767px) {
    #menu-btn {
        display: block;
        /* S'affiche sur les écrans mobiles */
    }

    #navbar a {
        display: none;
        /* Masque les liens du menu par défaut sur mobile */
    }

    #navbar.active a {
        display: block;
        /* Affiche les liens du menu lorsque 'active' est ajouté */
    }
}

.nav-button {
    margin: 5px 0;
    /* Espacement vertical entre les boutons */
    padding: 10px 20px;
    color: white;
    background-color: darkorange;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    /* Centrer le texte */
    width: 100%;
    /* Prendre toute la largeur disponible */
    max-width: 300px;
    /* Limiter la largeur maximale */
    display: inline-block;
    /* Pour que les styles s'appliquent correctement */
    font-size: 18px;
    border: none;
}

#menu-btn {
    position: relative;
    /* Permet le positionnement absolu des éléments enfants */
    padding-left: 30px;
    /* Fournit de l'espace pour la flèche à gauche */
}

#menu-btn::before {
    content: '';
    position: absolute;
    /* Positionne la flèche de manière absolue par rapport au bouton */
    left: 15px;
    /* À 10px de la bordure gauche du bouton */
    top: 50%;
    /* Centre la flèche verticalement */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    /* Flèche pointant vers le bas */
    transition: transform 0.3s ease;
    transform: translateY(-50%);
    /* Centre la flèche verticalement par rapport à son milieu */
}

#menu-btn.open::before {
    transform: translateY(-50%) rotate(180deg);
    /* Flèche pointant vers le haut et centrée */
}


.game-image-wrapper {
    width: 100%;
    background-image: url('/img/presentation-games.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 56.25%;
    /* Ratio 16:9 pour la hauteur, à ajuster selon tes besoins */
    position: relative;
}

.game-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 40%;
    /* Taille maximale du logo */
    height: auto;
    z-index: 2;
}

@media (max-width: 768px) {
    .game-logo {
        max-width: 40%;
        /* Ajuste pour les petits écrans */
    }
}