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