/* Lecteur "forme d'onde" partagé — Programme Élève LearnDash. */

.pel-forme-onde {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin: 10px 0;
}

/* Pas de fond/cercle autour de l'icône (Samuel, 25/09/2026 : "le conteneur
   est de bonne taille mais pas le bouton" — le petit glyphe perdu dans un
   rond de couleur) : l'icône elle-même est maintenant grande, dessinée en
   CSS pur (triangle plein), sans habillage autour.

   Verrouillage de forme (2026-09-29) : comme pour les autres boutons ronds
   du plugin (voir includes/14-... et includes/25-...), le thème/Elementor
   applique ses propres styles génériques de <button> (souvent avec
   !important) — y compris parfois un fond plein et un "border: 0" sur tous
   les enfants, ce qui écrasait à la fois le fond transparent du bouton ET
   le triangle/les barres de pause (dessinés en CSS via des bordures) : il
   ne restait plus visuellement qu'un simple rectangle de la couleur du
   thème, sans aucune icône. Sélecteur doublé + !important sur toutes les
   propriétés qui définissent la forme, pour être plus spécifique et
   prioritaire que n'importe quelle règle générique "button { ... }". */
.pel-forme-onde .pel-fo-bouton-lecture.pel-fo-bouton-lecture {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
}

.pel-forme-onde .pel-fo-bouton-lecture.pel-fo-bouton-lecture:disabled {
    opacity: .35;
    cursor: default;
}

/* Triangle bleu = lecture (demande explicite du 25/09/2026). */
.pel-forme-onde .pel-fo-icone-jouer.pel-fo-icone-jouer {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 5px; /* recentre optiquement le triangle dans le bouton */
    border-top: 16px solid transparent !important;
    border-bottom: 16px solid transparent !important;
    border-left: 26px solid #2271b1 !important;
    border-right: none !important;
    background: transparent !important;
}

.pel-forme-onde .pel-fo-icone-pause.pel-fo-icone-pause {
    display: none;
    position: relative;
    width: 24px !important;
    height: 30px !important;
    border: none !important;
}
.pel-forme-onde .pel-fo-icone-pause.pel-fo-icone-pause::before,
.pel-forme-onde .pel-fo-icone-pause.pel-fo-icone-pause::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    width: 8px !important;
    height: 30px !important;
    border: none !important;
    background: #2271b1 !important;
}
.pel-forme-onde .pel-fo-icone-pause.pel-fo-icone-pause::before { left: 0 !important; }
.pel-forme-onde .pel-fo-icone-pause.pel-fo-icone-pause::after  { left: 16px !important; }

.pel-forme-onde .pel-fo-bouton-lecture.pel-fo-en-lecture .pel-fo-icone-jouer  { display: none !important; }
.pel-forme-onde .pel-fo-bouton-lecture.pel-fo-en-lecture .pel-fo-icone-pause  { display: block !important; }

/* Libellé de la fonction du bouton lecture, nettement séparé du bouton
   (ni collé, ni trop loin — demande explicite du 29/09/2026). */
.pel-fo-etiquette {
    flex: 0 0 auto;
    margin-left: .6em;
    margin-right: .4em;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.pel-fo-visuel {
    position: relative;
    flex: 1 1 auto;
    height: 44px;
    cursor: pointer;
    background: #f6f7f7;
    border-radius: 4px;
    overflow: hidden;
}

.pel-fo-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Barre de progression verticale : grande (toute la hauteur du visuel) et
   fine, qui avance au fil de la lecture — cf. demande explicite du 25/09. */
.pel-fo-curseur {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #d63638;
    pointer-events: none;
    transform: translateX(-1px);
}

.pel-fo-temps {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: #50575e;
    min-width: 34px;
    text-align: right;
}