/* --- Titre et bouton gérer --- */
.gestcat-toggle {
    cursor: pointer;
    font-size: 0.85rem;
    color: #9f85ff;
    opacity: 0.75;
    margin-left: 8px;
    transition: 0.2s;
}
.gestcat-toggle:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Volet coulissant --- */
.gestcat-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .25s ease;
}
.gestcat-panel:not(.closed) {
    max-height: 700px;
    opacity: 1;
    margin-top: 12px;
}

/* --- Tableau propre --- */
.gestcat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.gestcat-table th {
    color: #c7bfff;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(140,130,255,0.3);
    text-align: left;
}
.gestcat-table td {
    padding: 8px 4px;
    color: #eee;
}

/* --- Dot pastilles --- */
.cat-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
}
.cat-dot.essentiel { background:#36ffa9; }
.cat-dot.important { background:#ffe985; }
.cat-dot.plaisir   { background:#d8a1ff; }


/* --- Lien modifier discret --- */
.cat5020-edit-link {
    cursor: pointer;
    color: #b49dff;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: 0.2s;
}
.cat5020-edit-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- Titre coloré 50/30/20 --- */
.repartition-title span {
    font-weight: 700;
    margin-left: 4px;
}

.r5020-green { color: #4cff4c; }   /* Essentiel 50% */
.r5020-yellow { color: #ffd54f; }  /* Important 30% */
.r5020-purple { color: #c77bff; }  /* Plaisir 20% */

/* --- Total analysé --- */
.ratio-total {
    margin-top: 12px;
    font-size: 1rem;
    text-align: center;
    color: #d7d3ff;
    font-weight: 600;
}

/* --- Suggestions IA --- */
.suggest-box {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(140,130,255,0.15);
    color: #e5e1ff;
    font-size: 0.9rem;
    line-height: 1.45rem;
    border-left: 3px solid #a893ff;
}

.suggest-bad {
    color: #ff8585;
    font-weight: 600;
}

.suggest-good {
    color: #7cff9b;
    font-weight: 600;
}

/* — Couleurs du titre — */
.r5020-green { color: #4cff4c; }
.r5020-yellow { color: #ffd54f; }
.r5020-purple { color: #c77bff; }

.repartition-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.model-real-badge {
    font-size: 0.75rem;
    color: #d6cbff;
    opacity: 0.8;
}

/* — Total — */
.ratio-total {
    margin-top: 12px;
    font-size: 1rem;
    text-align: center;
    color: #d7d3ff;
    font-weight: 600;
}

/* — Suggestions IA — */
.suggest-box {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(140,130,255,0.15);
    color: #e5e1ff;
    font-size: 0.9rem;
    line-height: 1.45rem;
    border-left: 3px solid #a893ff;
}

.suggest-bad { color: #ff8585; font-weight: 600; }
.suggest-good { color: #7cff9b; font-weight: 600; }

/* — Note explicative — */
.rule-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: #e3e0ff;
    font-size: 0.85rem;
    line-height: 1.4rem;
}