Comment créer une sidebar dynamique

				
					/* ======================================================= */
/* STYLE LISTE ARTICLES (Style "Boîte encadrée")           */
/* ======================================================= */

/* 1. Le Conteneur Global (Le grand cadre) */
ul.wp-block-latest-posts__list {
    border: 1px solid #e1e1e1 !important;  /* Bordure grise fine tout autour */
    border-radius: 4px;         /* Coins légèrement arrondis */
    padding: 0 !important;      /* Enlève les marges internes par défaut */
    margin: 0 !important;       /* Enlève les marges externes */
    list-style: none !important; /* Enlève les puces (points noirs) */
    background-color: #fff;     /* Fond blanc propre */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Petite ombre légère (optionnel) */
}

/* 2. Chaque Article (Les lignes individuelles) */
ul.wp-block-latest-posts__list li {
    border-bottom: 1px solid #e1e1e1; /* La ligne de séparation entre chaque article */
    padding: 15px 20px;     /* Espace à l'intérieur : 15px haut/bas, 20px gauche/droite */
    margin-bottom: 0 !important; /* Colle les boîtes les unes aux autres */
    transition: background-color 0.3s; /* Transition douce au survol */
}

/* 3. Supprimer la bordure du dernier élément (Pour finir proprement) */
ul.wp-block-latest-posts__list li:last-child {
    border-bottom: none;
}

/* 4. Le Texte du lien */
ul.wp-block-latest-posts__list a {
    text-decoration: none !important; /* Pas de soulignement moche */
    color: #333;           /* Couleur gris foncé (plus doux que le noir pur) */
    font-weight: 500;      /* Texte un peu plus épais */
    font-size: 14px;       /* Taille du texte */
    display: block;        /* Rend toute la zone cliquable, pas juste le texte */
    line-height: 1.4;      /* Espace entre les lignes pour la lisibilité */
}

/* 5. Effet au Survol (Quand la souris passe dessus) */
ul.wp-block-latest-posts__list li:hover {
    background-color: #f9f9f9; /* Le fond devient gris très clair */
}

ul.wp-block-latest-posts__list a:hover {
    color: #ed0009; /* Ton ROUGE quand on passe la souris */
}

/* ======================================================= */
/* STYLE LISTE CATÉGORIES (Même style "Boîte")             */
/* ======================================================= */

/* 1. Le Conteneur Global */
ul.wp-block-categories-list {
    border: 1px solid #e1e1e1;       /* Bordure grise */
    border-radius: 4px;              /* Coins arrondis */
    padding: 0 !important;           /* Pas de marges internes */
    margin: 0 !important;            /* Pas de marges externes */
    list-style: none !important;     /* Pas de puces */
    background-color: #fff;          /* Fond blanc */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Ombre légère */
}

/* 2. Chaque Catégorie (Ligne) */
ul.wp-block-categories-list li {
    border-bottom: 1px solid #e1e1e1; /* Ligne de séparation */
    padding: 15px 20px;     /* Espace interne confortable */
    margin-bottom: 0 !important;
    transition: background-color 0.3s;
}

/* 3. Supprimer la ligne sous le dernier élément */
ul.wp-block-categories-list li:last-child {
    border-bottom: none;
}

/* 4. Le Texte du lien */
ul.wp-block-categories-list a {
    text-decoration: none !important;
    color: #333;            /* Gris foncé */
    font-weight: 500;
    font-size: 14px;
    display: block;         /* Rend toute la zone cliquable */
    line-height: 1.4;
}

/* 5. Effet au Survol */
ul.wp-block-categories-list li:hover {
    background-color: #f9f9f9; /* Fond gris clair au survol */
}

ul.wp-block-categories-list a:hover {
    color: #ed0009; /* Ton ROUGE au survol */
}

/* Décalage pour les sous-catégories (enfants) */
ul.wp-block-categories-list ul.children {
    border: none; /* Pas de double bordure */
    box-shadow: none; /* Pas de double ombre */
    margin-top: 10px !important;
}
ul.wp-block-categories-list ul.children li {
    border-bottom: 1px dashed #e1e1e1; /* Séparateur plus discret */
    padding-left: 10px; /* Décalage vers la droite */
}