/*  #0b8935
#5f890b
#350b89
#890b5f
*/

:root {
    --qs-green-rgb : #0b8935;
    --qs-green-hsl : hsl(140, 85%, 29%);
    --qs-green-hsl-darker : hsl(140, 85%, 19%);
    --qs-green-hsl-darkest : hsl(140, 85%, 9%);

    --qs-green-comp-rgb : rgb(95, 137, 11);
    --qs-green-comp-hsl : hsl(80, 85%, 29%);
    --qs-green-comp-hsl-darker : hsl(80, 85%, 19%);
    --qs-green-comp-hsl-darkest : hsl(80, 85%, 9%);

    --qs-dark-color : #021b0b;
    --qs-light-color : #f9f3f3;
    --qs-light-grey : #e3dddd;
    --qs-dark-grey : #525252;
}
body {
    /* Ajustez cette valeur à la hauteur réelle de votre navbar si nécessaire */
    padding-top: 100px; 
}
/* Optionnel: Si vous voulez un peu d'espace au-dessus du footer */
.main-content {
    padding-bottom: 2rem; /* Espace avant le footer */
}

.dropdown .dropdown-menu .dropdown-item:hover, .dropdown .dropdown-menu .dropdown-item:active, .dropup .dropdown-menu .dropdown-item:hover, .dropup .dropdown-menu .dropdown-item:active, .dropleft .dropdown-menu .dropdown-item:hover, .dropleft .dropdown-menu .dropdown-item:active, .dropright .dropdown-menu .dropdown-item:hover, .dropright .dropdown-menu .dropdown-item:active {
	background-color: var(--qs-green-rgb);
	border-radius: .125rem;
	-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
	box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
@media (max-width: 576px) {
    .responsive-content {
      font-size: 2.2vw;
    }
  }
.navbar {
    background-color: white;
}
.navbar.navbar-light .navbar-toggler-icon {
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 128, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    align-self: end;
    padding-inline: 0;
    margin-inline: 0;
}
.dropdown-toggle-but::before {
	display: inline-block;
	margin-right: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .4em solid;
	border-right: .4em solid transparent;
	border-bottom: 0;
	border-left: .4em solid transparent;
}


.btn-qs-primary {
    color: var(--qs-light-color);
    background-color: var(--qs-green-hsl);
}
.btn-qs-primary:hover {
    color: var(--qs-light-color);
    background-color: var(--qs-green-hsl-darker);
}

.btn-qs-secondary {
    color: var(--qs-light-color);
    background-color: var(--qs-green-comp-hsl);
}
.btn-qs-secondary:hover {
    color: var(--qs-light-color);
    background-color: var(--qs-green-comp-hsl-darker);
}
.btn-outline-qs-green {
	color: var(--qs-green-rgb) !important;
	background-color: transparent !important;
	border: 2px solid var(--qs-green-rgb) !important;
}
.btn-outline-qs-green:hover, .btn-outline-qs-green:focus, .btn-outline-qs-green:active, .btn-outline-qs-green:active:focus, .btn-outline-qs-green.active {
	color: var(--qs-green-rgb) !important;
	background-color: transparent !important;
	border-color: var(--qs-green-rgb) !important;
}

.text-qs-light-grey {
    color: var(--qs-light-grey);
}

.text-qs-dark-grey {
    color: var(--qs-dark-grey);
}

.text-qs-green {
    color: var(--qs-green-rgb);
}

.bg-qs-green {
	background-color: var(--qs-green-rgb) !important;
}
.pagination .page-item.active .page-link {
	color: #fff;
	background-color: #a6c !important;
	border-radius: .125rem;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}


.md-form textarea:focus:not([readonly]), .md-form input[type="text"]:not(.browser-default):focus, .md-form input[type="password"]:not(.browser-default):focus, .md-form input[type="email"]:not(.browser-default):focus, .md-form input[type="number"]:not(.browser-default):focus, .md-form input[type="date"]:not(.browser-default):focus, .md-form input[type="tel"]:not(.browser-default):focus {
	
	box-shadow: none !important;
	border-bottom: 2px solid #a6c !important;
  }
  
  .md-form textarea:focus:not([readonly]) + label, .md-form input[type="text"]:not(.browser-default):focus + label, .md-form input[type="password"]:not(.browser-default):focus + label, .md-form input[type="email"]:not(.browser-default):focus + label, .md-form input[type="number"]:not(.browser-default):focus + label, .md-form input[type="date"]:not(.browser-default):focus + label, .md-form input[type="tel"]:not(.browser-default):focus + label {
	color: #a6c !important;
	font-weight: 600 !important;
  }

.md-form select {
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #ced4da;
	border-radius: 0;
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
	transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
	transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
	transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
	}

.md-form>select:focus {
	
		box-shadow: none !important;
		border-bottom: 2px solid #a6c !important;
	  }
  
.md-form>select:focus + label {
	color: #a6c !important;
	font-weight: 600;
	box-shadow: none !important;
	}

    .dropdown-content li > a, .dropdown-content li > span {
        display: block;
        padding: .5rem;
        font-size: .9rem;
        color: #a6c;
    }


	.form-check-input[type="radio"]:not(:checked) + label::before, .form-check-input[type="radio"]:not(:checked) + label::after, label.btn input[type="radio"]:not(:checked) + label::before, label.btn input[type="radio"]:not(:checked) + label::after {
		border: 1px solid #6c757d;
	}
	.form-check-input[type="radio"]:checked + label::after {
		background-color: #a6c !important;
		border: 1px solid #6c757d !important;
	}

	.form-check-input[type="radio"]:focus {
		box-shadow: none !important;
	}
    

	/* --- Styles pour l'icône afficher/masquer mdp --- */
.input-group-password-container {
    position: relative;
}

/* Ajuster le padding droit des champs password pour laisser la place à l'icône */
.input-group-password-container input[type="password"],
.input-group-password-container input[type="text"] {
    /* Augmentez cette valeur si l'icône est large ou si vous voulez plus d'espace */
    padding-right: 40px !important;
}

.input-group-password-container .toggle-password-vis {
    position: absolute;
    top: 50%; /* Alignement vertical initial */
    right: 1.5rem; /* Distance du bord droit */
    transform: translateY(-50%); /* Centrage vertical parfait */
    cursor: pointer;
    color: #aaa; /* Couleur discrète pour l'icône */
    z-index: 2; /* Pour être sûr qu'elle est au-dessus de l'input */
    background: none !important; /* Annuler le fond de input-group-text si MDB l'ajoute */
    border: none !important; /* Annuler la bordure si MDB l'ajoute */
    padding: 0 !important; /* Annuler le padding si MDB l'ajoute */
    /* Ajuster la taille si nécessaire */
    font-size: 1rem;
    line-height: 1; /* Pour éviter des décalages verticaux */
}

/* Optionnel: changer la couleur au survol */
.input-group-password-container .toggle-password-vis:hover {
    color: #333;
}

/* --- Styles existants pour la force (légère adaptation marge feedback) --- */
#password-strength-feedback {
    /* Si besoin, ajuster la marge supérieure pour tenir compte de la position de l'icône */
    /* margin-top: 10px; */ /* Déjà défini */
    font-size: 0.9em;
    max-width: 300px; /* Ou w-100 de Bootstrap */
    display: none; /* Caché par défaut */
    position: absolute; /* Pour le sortir du flux et éviter qu'il pousse l'icône */
    top: 100%; /* Se positionne juste en dessous de l'input */
    left: 0;
    background-color: white; /* Fond pour cacher le contenu derrière si nécessaire */
    padding: 5px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 3; /* Au-dessus de l'icône */
}

/* Le reste du CSS pour la barre, le texte, les exigences reste identique */
#password-strength-bar {
    height: 5px;
    width: 0;
    background-color: #ddd;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    margin-bottom: 8px;
    border-radius: 3px;
}
.strength-0 { width: 0%; background-color: #ddd; }
.strength-1 { width: 25%; background-color: #dc3545; } /* Rouge */
.strength-2 { width: 50%; background-color: #ffc107; } /* Jaune */
.strength-3 { width: 75%; background-color: #17a2b8; } /* Cyan */
.strength-4 { width: 100%; background-color: #28a745; } /* Vert */

#password-strength-text { margin-bottom: 8px; font-weight: bold; }
.text-weak { color: #dc3545; }
.text-medium { color: #ffc107; }
.text-ok { color: #17a2b8; }
.text-strong { color: #28a745; }

#password-requirements { color: #6c757d; list-style: none; padding: 0; margin: 0; } /* list-unstyled déjà dans HTML */
#password-requirements li { margin-bottom: 3px; transition: color 0.3s ease; }
#password-requirements li.valid { color: #28a745; }
#password-requirements li.valid i {
    color: #28a745;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
#password-requirements li:not(.valid) i {
    color: #dc3545;
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.desc {
    max-width: 350px;
    width: 350px;
    background-color: #a6c;
    opacity: 1;
 }
 
 .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
     margin-left: -3px;
     content: "";
     border-width: 0 5px 5px;
     border-bottom-color: #a6c !important;
 }
 .tooltip-inner {
    min-width: 100px !important;
    max-width: 100% !important; 
}

.list-group-item.active {
	z-index: 2;
	color: #fff;
	background-color: var(--qs-green-comp-hsl);
	border-color: var(--qs-green-comp-hsl);
}

.list-group-item-secondary {
	color: white;
	background-color: var(--qs-green-hsl);
}

@media (max-width: 767.98px) { /* En dessous de md */
    #navigationColumn {
        position: fixed;
        top: 56px; /* Hauteur de la navbar */
        left: 0;
        width: 280px; /* Largeur de la sidebar mobile */
        height: calc(100vh - 56px); /* Pleine hauteur moins la navbar */
        background-color: #fff;
        z-index: 1040; /* Au-dessus du contenu, en dessous des modals */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto; /* Permet le scroll dans la nav si contenu long */
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    }

    #navigationColumn.active {
        transform: translateX(0);
    }
    
    /* Pour que la card interne prenne la place et que le scroll soit sur #navigationColumn */
    #navigationColumn .card.questionnaire-nav {
        height: 100%; 
        box-shadow: none; /* Pas besoin de double shadow */
    }
    #navigationColumn .list-group {
        max-height: none; /* Le parent #navigationColumn gère le scroll */
    }

    /* Overlay pour l'arrière-plan quand la sidebar est ouverte */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1039; /* Juste en dessous de la sidebar */
        display: none; /* Caché par défaut */
    }
    .sidebar-overlay.active {
        display: block;
    }
}

.classic-tabs .bg-qs-green li a.active {
	border-color: #ffeb3b;
}