/* JAUGE DES BESOINS */
.needs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 237px; 
}

.need {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.need-icon {
    width: 20px;
    height: 20px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hunger .need-icon {
    background-image: url('/assets/img/icons/sante/faim.svg');
}

.thirst .need-icon {
    background-image: url('/assets/img/icons/sante/soif.svg');
}

.health .need-icon {
    background-image: url('/assets/img/icons/sante/soin.svg');
}

.physical .need-icon {
    background-image: url('/assets/img/icons/sante/physique.svg');
}

.distraction .need-icon {
    background-image: url('/assets/img/icons/sante/bonheur.svg');
}

.hygiene .need-icon {
    background-image: url('/assets/img/icons/sante/proprete.svg');
}

.illness .need-icon {
    background-image: url('/assets/img/icons/sante/maladie.svg');
}

.stress .need-icon {
    background-image: url('/assets/img/icons/sante/stress.svg');
}

.urine .need-icon {
    background-image: url('/assets/img/icons/sante/urine.svg');
}

.stool .need-icon {
    background-image: url('/assets/img/icons/sante/selle.svg');
}

.trash .need-icon {
    background-image: url('/assets/img/icons/sante/poubelle.svg');
}

.addiction .need-icon {
    background-image: url('/assets/img/icons/sante/brogue.svg');
}

.progress-bar {
    /* position: relative; */
    flex: 1;
    height: 10px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-fill {
    /* position: relative; */
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
    background-color: #4CAF50; /* Par défaut en vert */
    overflow: hidden;
    /* width: 0; /* Default width */
}

.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 9%,
        rgba(255, 255, 255, 0.2) 9%,
        rgba(255, 255, 255, 0.2) 10%
    );
    z-index: 1;
    pointer-events: none;
}

.need::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0000009c;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 10;
    opacity: 0;
    pointer-events: none; /* Empêche la tooltip d'interférer avec le survol */
    transition: opacity 0.2s ease-in-out; /* Pour une transition douce */
}

.need:hover::after {
    opacity: 1;
}

/* Couleurs de progression */
.progress-fill[data-value="10"] {
    background-color: #D32F2F; /* Rouge foncé */
}

.progress-fill[data-value="20"] {
    background-color: #D32F2F; /* Rouge foncé */
}

.progress-fill[data-value="30"],
.progress-fill[data-value="40"] {
    background-color: #FFA000; /* Orange */
}

.progress-fill[data-value="50"],
.progress-fill[data-value="60"] {
    background-color: #FBC02D; /* Jaune */
}

.progress-fill[data-value="70"],
.progress-fill[data-value="80"] {
    background-color: #8BC34A; /* Vert clair */
}

.progress-fill[data-value="90"],
.progress-fill[data-value="100"] {
    background-color: #4CAF50; /* Vert */
}