/* ================================================================= */
/* 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;
    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);
    background-color: var(--source-color-accent-two-very-light);
    width: fit-content;
    box-shadow: var(--shadow-z2);
}

/* Style de base du bouton (rond) */
.tts-btn-icon {
    width: calc(28.8 / 16 * 1rem);  /* 1.8rem */
    height: calc(28.8 / 16 * 1rem); /* 1.8rem */
    background: var(--color-tts-btn-icon);
    border: calc(2 / 16 * 1rem) solid var(--color-tts-btn-icon-border);
    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 {
    width: calc(19.2 / 16 * 1rem);  /* 1.2rem */
    height: calc(19.2 / 16 * 1rem); /* 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;
    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;
}