.audience-toggle { 
    display: inline-flex; 
    align-items: center; 
    gap: .75rem; 
}

.audience-toggle .toggle {
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    gap: .75rem;
    border: 0; 
    background: transparent; 
    cursor: pointer; 
    padding: 0;
    font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.audience-toggle .label {
    user-select: none;
    transition: color .18s ease;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #777;
}

.audience-toggle[data-variant="dark"] .label {
    color: #A7A7A7;
}

.audience-toggle[data-variant="light"] .label {
    color: #777;
}

/* État actif : plus foncé et plus gras */
.audience-toggle.is-part .label-left {
    color: #4c8bad; /* bleu particuliers */
    font-weight: 700;
}

.audience-toggle.is-pro .label-right {
    background: linear-gradient(135deg, #a5c942, #4b8cae);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* État inactif : plus clair et normal */
.audience-toggle.is-part .label-right {
    color: #A7A7A7;
    font-weight: 600;
}

.audience-toggle.is-pro .label-left {
    color: #A7A7A7;
    font-weight: 600;
}

.audience-toggle .track {
    position: relative; 
    width: 74px; 
    height: 30px; 
    border-radius: 9999px;
    transition: background .18s ease; 
    flex: 0 0 auto; 
}

.audience-toggle[data-variant="dark"] .track { 
    background: rgba(255,255,255,.28); 
}

.audience-toggle[data-variant="light"] .track { 
    background: #EDEDED; 
}

/* Mode Particuliers actif: piste grise (état décoché) */
.audience-toggle.is-part .track {
    background: #EDEDED; /* gris clair pour état décoché */
}

/* Mode Professionnels actif: piste avec dégradé vert */
.audience-toggle.is-pro .track {
    background: linear-gradient(135deg, #a5c942, #4b8cae); /* dégradé vert charte graphique */
}

.audience-toggle .knob {
    position: absolute; 
    top: 50%; 
    left: 4px; 
    width: 22px; 
    height: 22px; 
    border-radius: 50%;
    background: #fff; 
    transform: translate(0,-50%); 
    transition: transform .18s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.audience-toggle.is-pro .knob { 
    transform: translate(48px,-50%); 
}



.toggle:focus-visible { 
    outline: 2px solid rgba(59,130,246,.9); 
    outline-offset: 4px; 
}

@media (max-width: 640px) {
    .audience-toggle .track { 
        width: 64px; 
        height: 26.5px; 
    }
    
    .audience-toggle .knob { 
        width: 19px; 
        height: 19px; 
        left: 3.5px; 
    }
    
    .audience-toggle.is-pro .knob { 
        transform: translate(41.5px,-50%); 
    }
    
    .audience-toggle .toggle { 
        font-weight: 600; 
        font-size: 12.5px; 
    }
}