/* --- Conteneur Principal --- */
.headerhome-container {
    display: flex;
    justify-content: right; /* Centre le toggle horizontalement (tu peux changer en flex-end ou flex-start selon tes besoins) */
    align-items: center;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
}

/* --- Le Toggle Switch (Le fond) --- */
.toggle-switch {
    display: inline-flex;
    background-color: var(--color-primary); /* Utilise ton gris très clair #F2F2F2 */
    padding: 4px;
    border-radius: 30px; /* Bords très arrondis style "pilule" */
    border: 1px solid var(--color-border);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03); /* Léger ombrage interne pour la profondeur */
}

/* --- Les Options (Les liens <a>) --- */
.toggle-option {
    display: inline-block;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 26px; /* Doit être légèrement inférieur ou égal au parent pour rester propre */
    transition: all 0.25s ease; /* Transition fluide pour le survol et le clic */
    cursor: pointer;
}

/* --- État Hover (Au survol) --- */
.toggle-option:hover:not(.active) {
    color: var(--color-text-dark);
    background-color: var(--color-bg-hover);
}

/* --- État Actif (.active) --- */
/* J'ai supposé que ta boucle génère une classe "active" pour l'élément sélectionné */
.toggle-option.active {
    color: var(--color-secondary); /* Ton rose/rouge #f07276 */
    background-color: #ffffff; /* Fond blanc pour faire ressortir l'option active */
    font-weight: 400;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Effet de bouton "posé" au-dessus */
}