.group-container {
            width: 50%;
            margin: 0 auto; /* Centre horizontalement */
        }
        
        
.fruity .navbar {
    background-color: #140f11 !important;
    border-radius: 0!important;
    box-shadow: 0 3px 3px hsla(200,3%,53%,.1);
}

#navbar ul.navbar-nav li > a {
color: #FFFFFF;
font-weight:600;
}
#navbar ul.navbar-nav li > a.dropdown-item {
    color: black;
    font-weight:400;
}
#navbar ul.navbar-nav li > a.dropdown-item:hover {
    color: white;
    font-weight:400;
}
.logo-container>img {
  max-height: 100px;
  height: 100%;
  padding: 15px;
  width: auto;
}
.asterisk { 
    display:none; 
}

.top-container{
    margin-top:0px;
}

.alert-warning {
            background-color: #ffcccc; /* Rouge clair */
            color: black; /* Ajustez la couleur du texte si nécessaire */
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }

        
.question-text{
    font-size:17px;
}

.ls-questionhelp{
    color:#d7a700;
    text-align:left;
}

.question-help-container {
    background-color:black;
    border:none;
}

.question-container {
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Styles pour le titre de la question */
.question-title-container {
    border-radius: 10px 10px 0 0;
    padding: 15px;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
}

/* Styles pour l'astérisque obligatoire */
.asterisk {
    margin-right: 10px;
}

.asterisk .text-danger {
    color: #dc3545;
}

/* Styles pour le texte de la question */
.question-text {
    font-size: 16px;
    font-weight: bold;
}

/* Styles pour les messages d'aide et de validation */
.question-valid-container {
    padding: 10px;
    background-color: #ebe7e7;
}

.ls-question-message {
    font-size: 14px;
    color:#d7a700;
}


.answer-item input {
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
}

.answer-container{
    border:none;
}

.bg-primary{
    background-color:black;
}


    
        body .top-container {
   margin-top: 0px!important;
}

/* Style pour le survol (hover) et focus du bouton primaire */
.fruity .btn-primary:hover,
.fruity .btn-primary:focus {
    background-color: #b88f00;  /* Fond doré plus foncé */
    border-color: #a17b00;      /* Bordure dorée plus foncée */
    color: #fff;                /* Texte blanc */
    box-shadow: 0 0 10px 2px rgba(184, 143, 0, 0.6);  /* Ombre dorée légère */
}

/* Effet actif - lorsque le bouton est cliqué */
.fruity .btn-primary:active {
    background-color: #a17b00;  /* Fond doré encore plus foncé */
    border-color: #8c6a00;      /* Bordure dorée plus sombre */
    color: #fff;                /* Texte blanc */
    box-shadow: 0 0 15px 4px rgba(184, 143, 0, 0.8);  /* Ombre plus marquée */
}

.fruity .text-info, .fruity .text-primary, .fruity .text-success {
    color: #d7a700 !important;
}

.fruity .btn-outline-secondary {
    background-color: hsla(0, 0%, 100%, .2);
    border: 1px solid #d7a700;
    color: #d7a700;
}


.fruity .form-control:focus {
    border: 1px solid #d7a700; /* Nouvelle couleur de la bordure */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(215, 167, 0, 0.6); /* Ombre avec couleur ajustée */
}
/* Cibler spécifiquement les boutons radio cochés avec !important */
input[type="radio"]:checked {
    background-color: #d7a700 !important;  /* Couleur dorée */
    border-color: #d7a700 !important;      /* Bordure dorée */
}



/* Effet Hover - bordure et fond plus foncé avec ombre dynamique */
.fruity .btn-outline-secondary:hover {
    background-color: #f8f8f8;  /* Fond plus foncé */
    border-color: #d7a700;  /* Bordure reste dorée */
    box-shadow: 0 0 8px 2px rgba(215, 167, 0, 0.6);  /* Ombre intense avec couleur dorée */
}

/* Effet Active - bordure plus marquée et fond encore plus foncé */
.fruity .btn-outline-secondary:active {
    background-color: #b08800;  /* Fond encore plus foncé */
    color: white;  /* Texte blanc */
    border-color: #c7a000;  /* Bordure plus foncée lors du clic */
    box-shadow: 0 0 12px 4px rgba(215, 167, 0, 0.8);  /* Ombre plus marquée */
}

.fruity .btn-outline-secondary:hover {
color:black;
}

/* Optionnel: effet de focus */
.fruity .btn-outline-secondary:focus {
    outline: none;  /* Supprime le contour de focus standard */
    box-shadow: 0 0 10px 4px rgba(215, 167, 0, 0.8);  /* Ombre dorée lorsqu'il est focus */
}

.fruity .btn-primary, .fruity .btn-primary.disabled, .fruity .btn-primary.disabled.active, .fruity .btn-primary.disabled:active, .fruity .btn-primary.disabled:focus, .fruity .btn-primary.disabled:hover {
    background-color: #d7a700;
    border: 1px solid #c3a84c;
}

.fruity .text-muted {
    color: #fff !important;
}
.fruity .dropdown-menu>.active>a, .fruity .dropdown-menu>.active>a:focus, .fruity .dropdown-menu>.active>a:hover, .fruity .dropdown-menu>li>a:focus, .fruity .dropdown-menu>li>a:hover {
    background-color: #b88f00 !important;
    color: #fff;
}
.fruity .bg-warning {
    background-color: #d1d1d1 !important;
}



/* Responsive styles */
@media (max-width: 768px) {
    #survey-nav .navbar-nav {
        text-align: center;
    }

    .navbar-toggler {
        border: 1px solid #d7a700;
    }

    .navbar-collapse {
        background-color: #000;
        padding: 10px 20px;
    }

    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    .navbar-nav .nav-link {
        font-size: 0.9rem;
        padding: 10px 15px;
    }
.fruity .navbar-collapse {
    box-shadow: inset 0 0px 0 hsla(0, 0%, 100%, .1);
    }
}