/* ================================================================= */
/* Styles des Contrôles TTS - Version FINALE STABLE ET ÉLÉGANTE      */
/* Objectif : Regroupement à gauche, empilement automatique si débordement */
/* ================================================================= */

/* Conteneur de la barre */
.tts-bar {
    display: flex;
    flex-wrap: wrap;
    /* CHANGEMENT : 5px devient une valeur relative */
    gap: var(--space-sm);
    align-items: center;
    justify-content: flex-start;
    margin: var(--space-md) 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    /* CHANGEMENT : 2px reste en px pour la précision de la bordure (standard) */
    border: 2px solid black;
    background-color: var(--source-color-accent-two-very-light);
    width: fit-content;
}

/* Style de base du bouton (rond) */
.tts-btn-icon {
    /* CHANGEMENT : 35px / 16 = 2.1875rem */
    width: 1.8rem;
    height: 1.8rem;
    background: var(--color-tts-btn-icon);
    border: 2px solid var(--color-tts-btn-icon-border);
    /* CHANGEMENT : Utilisation de votre variable radius-pill */
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* EFFET DE SURVOL */
.tts-btn-icon:not(:disabled):hover {
    transform: scale(var(--transform-scale-lg));
    box-shadow: var(--shadow-z2);
}

/* COULEUR ET TAILLE DES ICÔNES */
.tts-btn-icon .tts-icon-size {
    /* CHANGEMENT : 15px / 16 = 0.9375rem */
    width: 1.2rem;
    height: 1.2rem;
}

/* ÉTAT DÉSACTIVÉ et ÉTAT ACTIF DU BOUTON PLAY */
.tts-btn-icon[disabled],
.tts-play-pause-btn.is-playing {
    background: var(--color-tts-btn-desabled);
    opacity: 0.3;
    box-shadow: var(--shadow-z0);
}

/* Correction : Le bouton Play actif DOIT rester cliquable */
.tts-play-pause-btn.is-playing {
    cursor: pointer;
}

/* Style du Texte d'Explication (tts-label) */
.tts-label {
    color: black;
    /* CHANGEMENT : Utilisation de votre variable de base (1rem) */
    font-size: var(--font-size-base);
    font-weight: var(--fw-bold);
    user-select: none;
    cursor: default;
    white-space: nowrap;
}

/* Curseur Interdit pour tous les boutons de contrôle lorsqu'ils sont désactivés */
.tts-bar button:disabled {
    cursor: not-allowed !important;
}

/* Conserve la règle d'opacité pour l'aspect visuel pendant la lecture */
.tts-play-pause-btn.is-playing {
    opacity: 0.3;
}