/* ==============================================
// /assets/css/categorie.css
// Version 1.1
// LoisirsGratuits.ch
// ============================================== */

/* ============================================================
   Style spécifique au menu des catégories
   ============================================================ */

.categorie-sidebar {
    /* --- VERROUILLAGE LARGEUR 300PX --- */
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    
    /* Centrage horizontal si le conteneur est plus large */
    margin-left: auto;
    margin-right: auto;

    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--lg-primary-dark);
    border-radius: 6px;
    padding: 20px;
    font-family: sans-serif;
}

.categorie-sidebar h4 {
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 15px;
    margin-top: 0;
    letter-spacing: 0.5px;
}

.categorie-list { list-style: none; margin: 0; padding: 0; }
.categorie-item { border-bottom: 1px solid #eee; }
.categorie-item:last-child { border-bottom: none; }

/* BOUTON PRINCIPAL */
.categorie-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    padding: 18px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.categorie-name { flex: 1; text-align: left; font-size: 16px; color: var(--lg-primary-dark); font-weight: 400; transition: color 0.2s; }
.categorie-count { background-color: var(--lg-primary-dark); color: #fff; font-size: 12px; font-weight: bold; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px; transition: all 0.2s; }
.categorie-arrow { width: 8px; height: 8px; border-right: 2px solid var(--lg-primary-dark); border-bottom: 2px solid var(--lg-primary-dark); transform: rotate(45deg); transition: transform 0.3s ease, border-color 0.2s; margin-bottom: 3px; }

/* HOVER */
.categorie-header:hover { background-color: var(--lg-primary); }
.categorie-header:hover .categorie-name, .categorie-header:hover .categorie-count { color: #ffffff; }
.categorie-header:hover .categorie-arrow { border-color: #ffffff; }
.categorie-header:hover .categorie-count { background-color: #ffffff; color: var(--lg-primary); }

/* OPEN */
.categorie-item.open > .categorie-header { background-color: var(--lg-primary-dark); }
.categorie-item.open .categorie-name { color: #ffffff; font-weight: 500; }
.categorie-item.open .categorie-count { background-color: #ffffff; color: var(--lg-primary-dark); }
.categorie-item.open .categorie-arrow { border-color: #ffffff; transform: rotate(-135deg); }

/* SOUS-MENU */
.categorie-sublist { display: none; list-style: none; padding: 10px 0 10px 20px; }
.categorie-item.open .categorie-sublist { display: block; }

.categorie-sublist li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    border-left: 2px solid #eee; 
    margin-left: 0; 
    padding-left: 15px; 
    transition: all 0.2s;
    cursor: pointer;
}

.categorie-sublist li a:hover {
    color: var(--lg-primary-dark);
    border-left-color: var(--lg-primary-dark);
    background-color: #fafafa;
}

.categorie-sub-count { font-size: 11px; color: #666; background: #f1f1f1; padding: 2px 8px; border-radius: 10px; transition: 0.2s; }

/* ACTIF */
.categorie-sublist li a.active {
    background-color: #f2fbf2; 
    border-left: 4px solid var(--lg-primary-dark);
    padding-left: 13px; 
    color: var(--lg-primary-dark);
    font-weight: bold;
}
.categorie-sublist li a.active .categorie-sub-count { background: #fff; color: var(--lg-primary-dark); border: 1px solid #cae0ca; }

/* MOBILE SPECIFIQUE CATEGORIES */
@media (max-width: 768px) {
    /* On laisse vide ou on force le maintien des 300px si nécessaire. 
       Comme défini plus haut avec !important ou min-width/max-width identiques, 
       la sidebar restera à 300px même sur mobile. */
}