/* ==========================================================================
   Module « écoute » : épisodes du podcast, familles chantées, lecteur audio.
   Mis en file par les blocs ljd/ecoute-podcast et ljd/ecoute-familles.
   Tokens de la charte v1.2 uniquement (définis par app.css) ; tout est scopé
   sous .ljd-ecoute (sections du bloc + mini-lecteur flottant).
   ========================================================================== */

.ljd-officine .ljd-ecoute.s-episodes{background:var(--blanc-casse);padding-top:clamp(32px,3.8vw,48px)}
.ljd-officine .ljd-ecoute.s-titres{background:var(--creme)}
.ljd-officine .ljd-ecoute.s-prochains{background:var(--blanc-casse)}

/* ---------- LECTEUR ---------- */
.ljd-ecoute .lecteur{display:flex;align-items:center;gap:14px;margin:16px 0 4px}
.ljd-ecoute .lect-natif{width:100%}
/* JS actif : le lecteur maison remplace le natif (retiré du DOM par ecoute.js).
   Sans JS : seul le lecteur natif du navigateur est montré. */
.js .ljd-ecoute .lect-natif{display:none}
html:not(.js) .ljd-ecoute .lecteur > :not(.lect-natif){display:none}

.ljd-ecoute .lect-bouton{flex:0 0 auto;position:relative;width:56px;height:56px;border-radius:999px;border:0;background:var(--vert);color:var(--creme);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 22px -12px rgba(31,77,58,.6);transition:background-color var(--t-rapide),transform var(--t-rapide)}
.ljd-ecoute .lect-bouton:hover{background:var(--vert-hover)}
.ljd-ecoute .lect-bouton:active{transform:scale(.95)}
.ljd-ecoute .lect-bouton svg{width:26px;height:26px}
.ljd-ecoute .lect-bouton .ic-lecture{margin-left:2px}
.ljd-ecoute .lect-bouton .ic-pause,
.ljd-ecoute .en-lecture .lect-bouton .ic-lecture{display:none}
.ljd-ecoute .en-lecture .lect-bouton .ic-pause{display:block}
.ljd-ecoute .lecteur-chanson .lect-bouton{width:48px;height:48px}
.ljd-ecoute .lecteur-chanson .lect-bouton svg{width:22px;height:22px}
/* chargement : anneau autour du bouton (tourne seulement si le mouvement est permis) */
.ljd-ecoute .charge .lect-bouton::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--bordure);border-top-color:var(--vert)}
@media (prefers-reduced-motion:no-preference){
  .ljd-ecoute .charge .lect-bouton::after{animation:ljd-ecoute-tourne .9s linear infinite}
}
@keyframes ljd-ecoute-tourne{to{transform:rotate(360deg)}}

.ljd-ecoute .lect-piste{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ljd-ecoute .lect-barre{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--p:0%}
.ljd-ecoute .lect-barre::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to right,var(--vert) var(--p),var(--bordure) var(--p))}
.ljd-ecoute .lect-barre::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:99px;background:var(--vert);border:3px solid var(--blanc);box-shadow:0 1px 4px rgba(34,40,31,.35)}
.ljd-ecoute .lect-barre::-moz-range-track{height:6px;border-radius:99px;background:var(--bordure)}
.ljd-ecoute .lect-barre::-moz-range-progress{height:6px;border-radius:99px;background:var(--vert)}
.ljd-ecoute .lect-barre::-moz-range-thumb{width:14px;height:14px;border-radius:99px;background:var(--vert);border:3px solid var(--blanc);box-shadow:0 1px 4px rgba(34,40,31,.35)}
.ljd-ecoute .lect-barre:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:6px}
.ljd-ecoute .lect-temps{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--gris-texte);font-variant-numeric:tabular-nums}
.ljd-ecoute .lect-vitesse{flex:0 0 auto;min-width:54px;height:36px;border-radius:999px;border:1.5px solid var(--vert);background:transparent;color:var(--vert);font:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--t-rapide)}
.ljd-ecoute .lect-vitesse:hover{background:rgba(31,77,58,.07)}
.ljd-ecoute .lect-erreur{font-size:14.5px;color:var(--alerte);margin:6px 0 0}

/* ---------- ÉPISODES ---------- */
.ljd-ecoute .episode{max-width:880px;margin-inline:auto;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-carte);padding:clamp(20px,3vw,32px);box-shadow:var(--ombre-carte);transition:border-color var(--t-rapide),box-shadow var(--t-douce)}
.ljd-ecoute .episode.actif{border-color:var(--vert);box-shadow:var(--ombre-elev)}
.ljd-ecoute .episode.une{border-width:1.5px}
.ljd-ecoute .episodes{display:grid;gap:16px}
.ljd-ecoute .ep-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13.5px;color:var(--gris-texte);margin:0}
.ljd-ecoute .ep-meta > * + *::before{content:"·";margin:0 8px;color:var(--gris-texte)}
.ljd-ecoute .ep-num{font-weight:700;color:var(--vert);letter-spacing:.3px}
.ljd-ecoute .ep-meta .ep-dernier{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--creme);background:var(--vert);border-radius:999px;padding:4px 12px;margin-left:12px}
.ljd-ecoute .ep-meta .ep-dernier::before{content:none}
.ljd-ecoute .ep-titre{font-size:clamp(24px,2.8vw,30px);margin-top:8px}
.ljd-ecoute h4.ep-titre{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:var(--vert);line-height:1.12;font-size:clamp(22px,2.4vw,26px)}
.ljd-ecoute .ep-resume p{font-size:16px;color:var(--gris-texte);margin-top:12px;max-width:70ch}
.ljd-ecoute .ep-sous{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--vert);margin:20px 0 8px}

/* chapitres cliquables : on démarre l'épisode au bon passage */
.ljd-ecoute .ep-chapitres{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0;padding:0}
@media (max-width:700px){.ljd-ecoute .ep-chapitres{grid-template-columns:1fr}}
.ljd-ecoute .chap{width:100%;display:flex;align-items:baseline;gap:12px;text-align:left;background:transparent;border:0;border-radius:10px;padding:8px 10px;font:inherit;font-size:15px;color:var(--encre);cursor:pointer;transition:background-color var(--t-rapide)}
.ljd-ecoute .chap:hover{background:var(--creme)}
.ljd-ecoute .chap-t{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--vert);font-variant-numeric:tabular-nums;background:var(--sable);border-radius:6px;padding:2px 7px}
.ljd-ecoute .chap.en-cours{background:var(--creme);box-shadow:inset 3px 0 0 var(--vert)}
.ljd-ecoute .chap.en-cours .chap-l{font-weight:600;color:var(--vert)}
.ljd-ecoute .chap.en-cours .chap-t{background:var(--vert);color:var(--creme)}

/* liens et volets repliables */
.ljd-ecoute .ep-liens{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.ljd-ecoute .ep-fiche{display:inline-flex;align-items:center;gap:8px;background:var(--vert);color:var(--creme);font-size:14.5px;font-weight:600;text-decoration:none;border-radius:999px;padding:10px 18px;transition:background-color var(--t-rapide)}
.ljd-ecoute .ep-fiche svg{width:16px;height:16px;transition:transform var(--t-rapide)}
.ljd-ecoute .ep-fiche:hover{background:var(--vert-hover)}
.ljd-ecoute .ep-fiche:hover svg{transform:translateX(4px)}
.ljd-ecoute .ep-ausha{font-size:14.5px;font-weight:600;text-underline-offset:3px}
.ljd-ecoute .ep-plier{width:100%}
.ljd-ecoute .episode > .ep-plier{margin-top:14px}
.ljd-ecoute .ep-plier summary,
.ljd-ecoute .ch-plier summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--vert);list-style:none;padding:4px 0}
.ljd-ecoute .ep-plier summary::-webkit-details-marker,
.ljd-ecoute .ch-plier summary::-webkit-details-marker{display:none}
.ljd-ecoute .ep-plier summary::before,
.ljd-ecoute .ch-plier summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-rapide)}
.ljd-ecoute .ep-plier[open] summary::before,
.ljd-ecoute .ch-plier[open] summary::before{transform:rotate(45deg)}
.ljd-ecoute .ep-plier .ep-chapitres{margin-top:8px}
.ljd-ecoute .ep-sources p{font-size:14px;color:var(--gris-texte);margin-top:10px;line-height:1.6}

.ljd-ecoute .ep-liste-titre{font-size:clamp(24px,3vw,30px);text-align:center;margin:clamp(40px,5vw,56px) 0 20px}
.ljd-ecoute .ep-vide{max-width:640px;margin:0 auto;text-align:center;color:var(--gris-texte)}

/* bientôt au comptoir */
.ljd-ecoute .ep-suite{max-width:880px;margin-inline:auto}
.ljd-ecoute .ep-suite ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ljd-ecoute .ep-suite li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;background:var(--creme);border:1px dashed var(--bordure);border-radius:var(--r-encart);padding:14px 18px}
.ljd-ecoute .ep-suite time{flex:0 0 auto;min-width:190px;font-size:14px;font-weight:700;color:var(--vert)}
.ljd-ecoute .ep-suite li span{font-size:15.5px;color:var(--encre)}

/* ---------- FAMILLES CHANTÉES ---------- */
.ljd-ecoute .chansons{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,24px);align-items:start;max-width:1040px;margin-inline:auto}
@media (max-width:820px){.ljd-ecoute .chansons{grid-template-columns:1fr;max-width:560px}}
.ljd-ecoute .chanson{background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-carte);padding:clamp(20px,2.6vw,26px);box-shadow:var(--ombre-carte);transition:border-color var(--t-rapide),box-shadow var(--t-douce)}
.ljd-ecoute .chanson.actif{border-color:var(--vert);box-shadow:var(--ombre-elev)}
.ljd-ecoute .ch-tete{display:flex;align-items:center;gap:10px;margin:0}
.ljd-ecoute .ch-num{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--gris-texte);font-variant-numeric:tabular-nums}
.ljd-ecoute .ch-style{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:var(--vert);background:var(--creme);border:1px solid var(--bordure);border-radius:999px;padding:4px 11px}
.ljd-ecoute .ch-nouveau{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:var(--creme);background:var(--vert);border-radius:999px;padding:4px 11px}
.ljd-ecoute .ch-titre{font-size:clamp(24px,2.6vw,28px);margin-top:12px}
.ljd-ecoute .ch-sous{display:block;font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-style:normal;font-size:16px;font-weight:500;color:var(--gris-texte);margin-top:4px}
.ljd-ecoute .ch-date{font-size:13.5px;color:var(--gris-texte);margin:6px 0 0}
.ljd-ecoute .ch-ecoute{font-size:13.5px;color:var(--gris-texte);margin:2px 0 0}
.ljd-ecoute .ch-ecoute a{font-weight:600;text-underline-offset:3px}
.ljd-ecoute .ch-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600;background:var(--vert);color:var(--creme);border-radius:999px;padding:10px 18px;font-size:14.5px;text-decoration:none}
.ljd-ecoute .ch-cta:hover{background:var(--vert-hover)}
.ljd-ecoute .ch-reflexe{margin-top:16px;background:var(--creme);border-radius:var(--r-encart);padding:14px 16px;box-shadow:inset 3px 0 0 var(--vert)}
.ljd-ecoute .ch-reflexe-t{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--vert);margin-bottom:4px}
.ljd-ecoute .ch-reflexe p{font-size:15.5px;line-height:1.55;color:var(--encre)}
.ljd-ecoute .ch-reflexe p + p{margin-top:6px}
.ljd-ecoute .ch-plier{margin-top:14px}
.ljd-ecoute .ch-groupes{margin:8px 0 0;display:grid;gap:10px}
.ljd-ecoute .ch-groupes dt{font-size:15px;font-weight:700;color:var(--vert)}
.ljd-ecoute .ch-groupes dt span{font-weight:500;color:var(--gris-texte);font-size:14px}
.ljd-ecoute .ch-groupes dd{margin:2px 0 0;font-size:15.5px;line-height:1.55}
.ljd-ecoute .ch-groupes dd a{font-weight:600;text-underline-offset:3px}
.ljd-ecoute .ch-sources{font-size:13px;color:var(--gris-texte);line-height:1.55;margin-top:12px}
.ljd-ecoute .ch-note{max-width:640px;margin:clamp(22px,3vw,30px) auto 0;text-align:center;font-size:14px;color:var(--gris-texte)}

/* prochaines sorties : liste compacte */
.ljd-ecoute .prochains{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:1040px;margin:0 auto;padding:0}
@media (max-width:820px){.ljd-ecoute .prochains{grid-template-columns:1fr;max-width:560px}}
.ljd-ecoute .prochain{display:flex;align-items:center;gap:14px;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-encart);padding:14px 16px}
.ljd-ecoute .pr-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ljd-ecoute .pr-titre{font-size:16px;font-weight:700;color:var(--encre);line-height:1.3}
.ljd-ecoute .pr-titre .ch-sous{display:inline;font-size:15px;margin:0}
.ljd-ecoute .pr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px;color:var(--gris-texte)}
.ljd-ecoute .pr-lien{flex:0 0 auto;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--vert);border:1.5px solid var(--vert);border-radius:999px;padding:7px 13px;transition:background-color var(--t-rapide)}
.ljd-ecoute .pr-lien:hover{background:rgba(31,77,58,.07)}
@media (max-width:460px){
  .ljd-ecoute .prochain{flex-wrap:wrap}
  .ljd-ecoute .pr-lien{margin-left:auto}
}

/* ---------- MINI-LECTEUR FLOTTANT (créé par ecoute.js) ---------- */
.ljd-ecoute.lect-dock{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;width:min(760px,calc(100% - 24px));display:flex;align-items:center;gap:10px;background:var(--vert);color:var(--creme);border-radius:var(--r-carte);padding:12px 14px 12px 12px;box-shadow:0 22px 46px -18px rgba(23,59,44,.7);overflow:hidden}
.ljd-ecoute.lect-dock[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .ljd-ecoute.lect-dock{animation:ljd-ecoute-monte .28s cubic-bezier(.22,.61,.36,1)}
}
@keyframes ljd-ecoute-monte{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
.ljd-ecoute.lect-dock :focus-visible{outline:3px solid var(--creme);outline-offset:2px}
.ljd-ecoute .dock-progres{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(247,240,227,.22)}
.ljd-ecoute .dock-progres span{display:block;height:100%;width:0;background:var(--dore)}
.ljd-ecoute .dock-bouton{flex:0 0 auto;width:44px;height:44px;border-radius:999px;border:0;background:var(--creme);color:var(--vert);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ljd-ecoute .dock-bouton svg{width:22px;height:22px}
.ljd-ecoute .dock-bouton .ic-lecture{margin-left:2px}
.ljd-ecoute.lect-dock .dock-bouton .ic-pause,
.ljd-ecoute.lect-dock.en-lecture .dock-bouton .ic-lecture{display:none}
.ljd-ecoute.lect-dock.en-lecture .dock-bouton .ic-pause{display:block}
.ljd-ecoute .dock-saut{flex:0 0 auto;min-width:40px;height:36px;border-radius:999px;border:1.5px solid rgba(247,240,227,.5);background:transparent;color:var(--creme);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ljd-ecoute .dock-saut:hover{border-color:var(--creme)}
.ljd-ecoute.lect-dock:not(.dock-podcast) .dock-saut{display:none}
.ljd-ecoute .dock-txt{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--creme);text-decoration:none;line-height:1.3}
.ljd-ecoute .dock-titre{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ljd-ecoute .dock-sous{font-size:13px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ljd-ecoute .dock-txt:hover .dock-titre{text-decoration:underline;text-underline-offset:3px}
.ljd-ecoute .dock-temps{flex:0 0 auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.9}
.ljd-ecoute .dock-fermer{flex:0 0 auto;width:36px;height:36px;border-radius:999px;border:0;background:transparent;color:var(--creme);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ljd-ecoute .dock-fermer:hover{background:rgba(247,240,227,.12)}
.ljd-ecoute .dock-fermer svg{width:18px;height:18px}
@media (max-width:560px){
  .ljd-ecoute .dock-temps{display:none}
  .ljd-ecoute .dock-saut{min-width:36px;font-size:12px}
}
/* le contenu de fin de page reste accessible sous le mini-lecteur */
html.avec-dock body{padding-bottom:88px}
/* le bouton rond de CookieYes (bas gauche, z-index 999999) chevauchait le bouton « -15 » :
   il remonte au-dessus du mini-lecteur tant que celui-ci est ouvert */
html.avec-dock .cky-btn-revisit-wrapper{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 84px)!important}