/* Introduction section for gods */
#intro-personnages {
    text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
    max-width: 1200px; /* Set a max-width for the content */
    margin: 20px auto 20px auto; /* Center the section and add bottom margin */
}

/* General section margin */
section {
    margin-bottom: 40px;
}

section h1 {
    text-align: center;
    margin-bottom: 20px; /* Space between the title and the cards */
    font-size: 2.5em;
    color: #f5a623;
    width: 100%; /* Ensure the title spans full width */
}

/* Title styling for sections */
section h2 {
    text-align: center;
    margin-bottom: 20px; /* Space between the title and the cards */
    font-size: 2em;
    color: #f5a623;
    width: 100%; /* Ensure the title spans full width */
}

/* Container styling for each group of gods */
#perso-principaux, #perso-secondaires, #guardien-temple {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the gods horizontally */
    max-width: 1200px; /* Set a max-width for the content */
    margin: 0 auto 20px auto; /* Center the section and add bottom margin */
}

/* Individual god card styling */
.perso {
    background-color: rgba(0, 0, 0, 1);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px; /* Adjust the width as needed */
    margin: 20px; /* Space between each god card */
	box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); /* Ombre pour effet 3D */
}

/* Image styling for gods */
.perso img {
    width: 100%; /* Adjust to fit the card width */
    border-radius: 10px;
    margin-bottom: 15px;
}

/* Text details for gods */
.details-perso {
    text-align: left;
}

/* Styling for the name of the god */
.details-perso h3 {
    color: #f5a623;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer; /* Makes the name clickable */
}

/* Hide details by default */
.details-content {
    display: none; /* Hide details initially */
}

/* Show details when .visible is added */
.details-content.visible {
    display: block;
}

.details-perso p {
    color: #ffffff;
    margin-bottom: 10px;
}