/* Conteneur principal */
.event-detail-container {
    text-overflow: ellipsis;
    color: rgb(114, 240, 240);
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #000000;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Titres */
h1 {
    color: #000000 !important;
    margin-bottom: 15px;
    font-size: 30px;
    text-align: center;
}
h2 {
    color: #dad5d5 !important;
    margin-bottom: 15px;
    font-size: 24px;
    text-align: center;
}

/* Section des détails */
.event-details {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-details p {
    margin: 10px 0;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.event-details strong {
    color: #333;
}

/* Section des commentaires */
.comment-section {
    margin-top: 30px;
}

.commentaire {
    border: 10px solid #006d5b;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: #45c17b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.commentaire p {
    word-wrap: break-word;
    margin: 5px 0;
    font-size: 16px;
    color: #000000;
}

/* Formulaire des commentaires */
.comment-form {
    margin-top: 20px;
    padding: 15px;
    background-color: #45c17b;
    border: 2px solid #fa0505;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-form textarea {
    width: 100%;
    margin-bottom: 10px;
    /* padding: 10px; */
    border: 5px solid #000000;
    border-radius: 7px;
    resize: vertical;
    font-size: 16px;
}

.comment-form button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.comment-form button:hover {
    background-color: #0056b3;
}

/* Responsive */
@media (max-width: 768px) {
    .event-detail-container {
        padding: 10px;
    }

    .event-details p, .commentaire p {
        font-size: 14px;
    }

    .comment-form textarea {
        font-size: 14px;
    }

    .comment-form button {
        font-size: 14px;
    }
}
.success-message {
    color: green;
    font-weight: bold;
    margin-bottom: 10px;
}

.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}
/* Conteneur pour les boutons Modifier et Supprimer */
.action-buttons {
    display: flex;
    align-items: flex-end; /* Aligne les boutons verticalement */
    gap: 10px; /* Espacement horizontal entre les boutons */
    margin-top: 10px;
}

/* Champ textarea */
.inline-form textarea {
    background-color: #91e5a2;
    width: 100%; /* Prend toute la largeur disponible */
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
    font-size: 14px;
    box-sizing: border-box; /* Inclut les bordures dans la largeur */
}

/* Boutons Modifier et Supprimer */
.btn-modifier,
.btn-supprimer {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-modifier {
    background-color: #007bff; /* Couleur bleue pour Modifier */
    color: white;
}

.btn-modifier:hover {
    background-color: #0056b3; /* Couleur plus foncée au survol */
}

.btn-supprimer {
    background-color: #dc3545; /* Couleur rouge pour Supprimer */
    color: white;
}

.btn-supprimer:hover {
    background-color: #c82333; /* Couleur plus foncée au survol */
}
.event-image {
    display: block; /* Transforme l'image en élément de bloc */
    margin: 0 auto; /* Centre horizontalement l'image */
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Maintient les proportions de l'image */
}

/* Surligner le commentaire en rouge pendant la modification */
.commentaire.modification-en-cours {
    border: 2px solid red;
    background-color: #ffe6e6; /* Rouge clair pour le fond */
}

/* Message d'erreur en rouge */
.error-message {
    color: red; /* Couleur rouge pour le texte */
    font-weight: bold; /* Texte en gras */
    margin-bottom: 10px; /* Espacement en bas */
}

/* Surligner le commentaire en rouge pendant la modification */
.commentaire.modification-en-cours {
    border: 2px solid red;
    background-color: #ffe6e6; /* Rouge clair pour le fond */
}

/* Surligner le commentaire en vert après modification */
.commentaire.modifie {
    border: 2px solid green;
    background-color: #e6ffe6; /* Vert clair pour le fond */
}

p {
    margin-top: 15px !important;
    margin-bottom: 1rem !important;
}