.h5p-tracker-actions {
    display: flex;
    gap: 10px; /* Ajustez cette valeur pour plus ou moins d'espace */
}

.h5p-tracker-actions form {
    display: inline;
}

.message.answered {
    background-color: #f0f4f8; /* Light gray-blue background */
    border-left: 5px solid #2c7be5; /* Accent border to the left */
    padding: 15px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333; /* Text color */
    max-width: 600px;
    margin: 20px 0; /* Center alignment and spacing */
}

.message.answered p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.message.answered::before {
    content: "✓"; /* Check mark for completion */
    color: #2c7be5;
    font-weight: bold;
    margin-right: 8px;
    font-size: 1.2rem;
    vertical-align: middle;
}

.consigne {
    background-color: #f9f9fc; /* Light background for subtle emphasis */
    border-left: 4px solid #4b8bf4; /* Accent border to draw attention */
    padding: 15px 20px; /* Spacing around the text */
    border-radius: 4px; /* Rounded corners */
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333; /* Dark text color for readability */
    margin-bottom: 20px; /* Space below the div */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.consigne p {
    margin: 0;
    font-size: 1rem;
}

.consigne h3 {
    margin-top: 0;
    color: #2c3e50; /* Darker color for heading */
    font-size: 1.2rem;
    font-weight: bold;
}

/* Optional: add an icon before the consigne text */
.consigne::before {
    content: "📘"; /* Book icon for instruction style */
    font-size: 1.3rem;
    margin-right: 10px;
    vertical-align: middle;
    color: #4b8bf4;
}

/* Navigation Menu */

/* Style the navigation container specifically for this section */
.wp-block-group.has-base-background-color.has-background .wp-block-navigation.is-vertical.is-responsive {
    background-color: #f8f9fc;
    border-radius: 8px;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    box-sizing: border-box;
}

/* Reset padding and margin on <ul> and <li> elements within the specific navigation block */
.wp-block-group.has-base-background-color.has-background .wp-block-navigation ul {
    padding: 0;
    margin: 0;
}

.wp-block-group.has-base-background-color.has-background .wp-block-navigation ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style each menu item */
.wp-block-group.has-base-background-color.has-background .wp-block-navigation .wp-block-navigation-item {
    position: relative;
    font-weight: 500;
    font-size: 1rem;
    color: #333;
    transition: background-color 0.3s;
    width: 100%;
    box-sizing: border-box;
}

/* Make the entire item clickable */
.wp-block-group.has-base-background-color.has-background .wp-block-navigation .wp-block-navigation-item a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Hover effect on the entire item */
.wp-block-group.has-base-background-color.has-background .wp-block-navigation .wp-block-navigation-item:hover {
    background-color: #e9ecef;
}

.wp-block-group.has-base-background-color.has-background .wp-block-navigation .wp-block-navigation-item.is-active {
    background-color: #0056b3;
    color: #ffffff;
}

.wp-block-group.has-base-background-color.has-background .wp-block-navigation .wp-block-navigation-item.is-active a {
    color: #ffffff;
}

/* Full-width separator using a pseudo-element */
.wp-block-group.has-base-background-color.has-background .wp-block-navigation .wp-block-navigation-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ddd;
    box-sizing: border-box;
}