.lv-lecteur {
    --lv-couleur: #2c6e63;
    font-size: 15px;
    line-height: 1.4;
    color: #222;
}

/* --- Barre de commandes --- */
.lv-barre {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #222;
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.92em;
    cursor: pointer;
    line-height: 1.2;
}
.lv-btn:hover { background: #f4f4f4; }
.lv-btn:focus-visible { outline: 2px solid var(--lv-couleur); outline-offset: 2px; }
.lv-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.lv-btn-principal {
    background: var(--lv-couleur);
    border-color: var(--lv-couleur);
    color: #fff;
    font-weight: 600;
}
.lv-btn-principal:hover { filter: brightness(1.08); background: var(--lv-couleur); }
.lv-btn-icone { padding: 8px 10px; }
.lv-btn-discret {
    background: transparent;
    border-style: dashed;
    font-size: 0.85em;
}

/* --- Barre flottante --- */
.lv-flottant {
    position: fixed;
    z-index: 9990;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    padding: 10px;
    max-width: min(92vw, 420px);
}
.lv-pos-bas-droite { bottom: 20px; right: 20px; }
.lv-pos-bas-gauche { bottom: 20px; left: 20px; }
.lv-pos-haut-droite { top: 20px; right: 20px; }
.lv-pos-haut-gauche { top: 20px; left: 20px; }

.lv-integre { margin: 1rem 0; }

/* --- Progression --- */
.lv-progression {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.lv-piste {
    flex: 1;
    height: 7px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 99px;
    cursor: pointer;
    overflow: hidden;
}
.lv-piste:focus-visible { outline: 2px solid var(--lv-couleur); outline-offset: 2px; }
.lv-avancement {
    height: 100%;
    width: 0;
    background: var(--lv-couleur);
    border-radius: 99px;
    transition: width 0.25s ease;
}
.lv-compteur {
    font-size: 0.8em;
    color: #666;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Panneau de réglages --- */
.lv-panneau {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    gap: 8px;
}
.lv-ligne {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 8px;
}
.lv-ligne label { font-size: 0.85em; color: #555; }
.lv-ligne select,
.lv-ligne input[type="range"] { width: 100%; min-width: 0; }
.lv-ligne select {
    padding: 5px 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font: inherit;
    font-size: 0.85em;
    background: #fff;
}
.lv-ligne input[type="range"] { accent-color: var(--lv-couleur); }
.lv-ligne output {
    font-size: 0.8em;
    color: #666;
    min-width: 3.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lv-ligne-fin { grid-template-columns: 1fr; justify-items: start; }

/* --- Message d'état --- */
.lv-message {
    margin: 8px 0 0;
    font-size: 0.85em;
    color: #8a5a00;
    background: #fff6e0;
    border-radius: 6px;
    padding: 6px 8px;
}

/* --- Surlignage du passage lu ---
   La couleur réelle est injectée par le JavaScript depuis les réglages
   (variable --lv-surlignage) ; la valeur ci-dessous n'est qu'un repli. */
.lv-en-lecture {
    background: var(--lv-surlignage, #ffe9a8);
    box-shadow: 0 0 0 4px var(--lv-surlignage, #ffe9a8);
    border-radius: 3px;
    transition: background 0.2s ease;
}

/* --- Bouton flottant "écouter la sélection" --- */
.lv-btn-selection {
    position: absolute;
    z-index: 9995;
    background: var(--lv-couleur, #2c6e63);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    font-size: 0.85em;
    padding: 7px 11px;
}
.lv-btn-selection:hover { filter: brightness(1.08); background: var(--lv-couleur, #2c6e63); }

@media (max-width: 600px) {
    .lv-flottant { left: 12px; right: 12px; max-width: none; }
    .lv-pos-bas-droite, .lv-pos-bas-gauche { bottom: 12px; }
    .lv-pos-haut-droite, .lv-pos-haut-gauche { top: 12px; }
    .lv-btn .lv-txt { display: none; }
}

@media print {
    .lv-lecteur, .lv-btn-selection { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .lv-avancement, .lv-en-lecture { transition: none; }
}