@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Boldonse&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
body {
    
     /* Couleur sable */
    color: #3b2f2f; /* Marron foncé */
    margin: 0;
    padding: 0px 0px 20px 0px;
    text-align: center;
    background-image: url('fond_tropical.jpg');
    background-size: cover; /* Pour que l'image couvre tout l'écran */
    background-position: center; /* Centre l'image */
    background-attachment: fixed; /* L'image reste fixe quand on scrolle */
}

header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #8b5e3c; /* Marron terreux */
    padding: 20px;
    padding : 0px 5% 0px 5%;
    text-align: center;
}

.autrepage{
    justify-content: center !important;
    text-align: center !important;
    border: 3px green solid;
}

header a img{
    height: 90px;
}

header a{
    width: 190px;
}

.lien-menu{
    text-decoration: none;
   font-family: 'Sour Gummy';
    color: #fff;
    font-size: 22px;
    transition: 0.1s;
}

.lien-menu:hover{
    color: #5abe32;
    text-decoration: underline;
}

/* Titre principal */
h1 {
    color: #fff;
    font-size: 40pt;
    font-family: 'Luckiest Guy';
}

/* Style des singes */
h2 {
    color: #2e522d; /* Vert foncé */
    font-size: 40px;
    font-family: 'Sour Gummy';
    margin-top: 5px;
}

.singe-container {
    display: flex; /* Active Flexbox */
    flex-wrap: wrap; /* Permet le retour à la ligne si l'écran est trop petit */
    justify-content: center; /* Centre les cartes horizontalement */
    gap: 30px; /* Ajoute un espace entre les cartes */
    padding: 20px;
}

.singe-card {
    background-color: #f4e3c1; /* Une couleur rappelant la savane */
    border: 2px solid #8b5e3c; /* Un contour marron pour l'effet bois */
    border-radius: 10px;
    padding: 15px;
    width: 400px; /* Taille fixe pour chaque carte */
    text-align: center;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); /* Effet d'ombre */
}

.singe-card p{
    font-size: 23px;
    text-align: left;
    padding-left: 7px;
    font-family: 'Sour Gummy';
}

.singe-card img {
    width: 100%;
    max-width: 100%;
    height: 600px;
    border-radius: 8px;
    margin-top: 10px;
}

.btn-ajout {
    display: inline-block;
    padding: 20px 40px;
    background-color:#f4e3c1; /* Vert nature */
    color:  #2e522d;
    border: solid #2e522d 2px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s;
    font-size: 20pt;
    font-family: 'Sour Gummy';
}

.btn-ajout:hover {
    background-color:  #8b5e3c;
    color: white;
}

form {
    display: flex;
    flex-direction: column;
    width: 400px;
    margin: auto;
    margin-top: 5%;
    background: #f4e3c1;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    font-family: 'Sour Gummy';
    font-size: 18pt;
}

label {
    font-weight: bold;
    margin-top: 30px;
}

input {
    padding: 8px;
    border: 1px solid #8b5e3c;
    border-radius: 5px;
}

button {
    margin-top: 20px;
    padding: 10px;
    background-color: #8b5e3c;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Sour Gummy';
    font-size: 16pt;
}

button:hover {
    background-color: #6d472b;
}

.delete-form {
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 12px;
    width: 90%;
}

.delete-form:hover {
    transform: scale(1.02);
}

.delete-btn {
    margin: 0px;
    background-color: #c0392b;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: #000000;
}