/* COPIE — source de vérité : .claude/skills/lecteur-audio/assets/lecteur.css
   Ne pas corriger ici : corriger la source, puis relancer scripts/installer.py. */
/* Lecteur audio Nousia — feuille du composant (source : .claude/skills/lecteur-audio/assets/).
   Tout est préfixé par .lect pour n'entrer en collision avec aucune règle d'un site.

   CHARTE : aucune couleur en dur dans les règles. Sept variables, posées avec des
   valeurs par défaut neutres dans :where(.lect) — spécificité nulle, donc le site
   hôte les remplace par une simple règle .lect { --lect-accent: var(--accent2); … }
   placée n'importe où, avant ou après cette feuille :
     --lect-accent   couleur de la lecture (barre faite, curseur, bouton lecture)
     --lect-fg       texte et boutons secondaires (temps, sauts, vitesse)
     --lect-rail     rail de progression (non lu)
     --lect-tampon   portion chargée en tampon (rendue à 45 % d'opacité)
     --lect-bg       fond sur lequel le lecteur est posé (bordure du curseur,
                     encre du bouton lecture survolé)
     --lect-focus    anneau de focus clavier
     --lect-erreur   message d'échec de lecture
   Dimensions : --lb (bouton de saut), --lp (lecture/pause), --lg (gouttière),
   --lrail (épaisseur du rail), --lv (afficheur de vitesse). Les variantes et les
   points de rupture ne font que les redéfinir. */

:where(.lect){
  --lect-accent:#c9a227;
  --lect-fg:#6b7280;
  --lect-rail:#d1d5db;
  --lect-tampon:#6b7280;
  --lect-bg:#ffffff;
  --lect-focus:#6366f1;
  --lect-erreur:#b91c1c;
}
@media (prefers-color-scheme:dark){
  :where(.lect){
    --lect-fg:#9aa0b0;--lect-rail:#2a2f3d;--lect-tampon:#9aa0b0;
    --lect-bg:#0d0f15;--lect-focus:#b49cf0;--lect-erreur:#eed4d1;
  }
}

.lect{
  --lb:44px;            /* cible tactile minimale */
  --lp:58px;            /* lecture/pause : nettement plus gros */
  --lg:8px;
  --lrail:8px;
  --lv:78px;            /* largeur fixe de l'afficheur de vitesse : le centrage
                           ne bouge pas au passage de « 1× » à « 1,15× » */
  display:block;
  font-family:inherit;
  margin:8px 0 0;
  color:var(--lect-fg);
}

/* L'élément natif reste dans le document (un site peut le lire pour compter le
   temps d'écoute) mais il est masqué tant que notre interface fonctionne. La
   classe lect-natif donne la spécificité qui l'emporte sur un « .x audio » du site. */
.lect audio.lect-natif{display:none}
/* Un site range le lecteur par bloc.hidden = true (prépa : plus de MP3 à venir).
   Sans cette règle, .lect{display:block} l'emporte sur le [hidden] du navigateur
   (origine auteur contre UA) et le lecteur reste visible. Constaté le 19/09/2026. */
.lect[hidden]{display:none}

/* Tous les boutons du composant repartent de zéro : un site qui style « button »
   globalement (fond, padding, ombre, survol animé) ne doit pas les déformer. */
.lect button{
  font:inherit;line-height:1;margin:0;box-shadow:none;filter:none;
  transform:none;min-height:0;text-transform:none;letter-spacing:normal;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- barre de progression ---------- */

.lect-barre{display:flex;align-items:center;gap:10px}
.lect-t{
  color:var(--lect-fg);font-size:.82rem;line-height:1;
  font-variant-numeric:tabular-nums;min-width:3.2em;
}
.lect-t-e{text-align:right}
.lect-t-d{text-align:left}

/* La piste fait 44 px de haut : c'est la zone réellement pointable. Le rail
   visible ne fait que --lrail et se centre dedans. */
.lect-piste{position:relative;flex:1 1 auto;min-width:0;height:44px}
.lect-piste::before,
.lect-tampon,
.lect-faite{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:var(--lrail);border-radius:999px;pointer-events:none;
}
.lect-piste::before{right:0;background:var(--lect-rail)}
.lect-tampon{width:0;background:var(--lect-tampon);opacity:.45}
.lect-faite{width:0;background:var(--lect-accent)}

/* Le <input type="range"> est posé par-dessus, piste transparente : on garde
   son tactile, son clavier et sa sémantique ARIA, notre rail est peint dessous. */
.lect-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.lect-range:focus{outline:none}
.lect-range:focus-visible{outline:2px solid var(--lect-focus);outline-offset:-2px;border-radius:8px}

/* Curseur — une règle par moteur : groupées, elles seraient toutes ignorées. */
.lect-range::-webkit-slider-runnable-track{background:transparent;border:none;height:var(--lrail)}
.lect-range::-moz-range-track{background:transparent;border:none;height:var(--lrail)}
.lect-range::-moz-range-progress{background:transparent;height:var(--lrail)}
.lect-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--lect-accent);border:2px solid var(--lect-bg);
  box-shadow:0 0 0 1px var(--lect-rail);
  margin-top:calc((var(--lrail) - 18px) / 2);
}
.lect-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--lect-accent);border:2px solid var(--lect-bg);
  box-shadow:0 0 0 1px var(--lect-rail);
}
.lect-range:active::-webkit-slider-thumb{
  width:22px;height:22px;margin-top:calc((var(--lrail) - 22px) / 2);
}
.lect-range:active::-moz-range-thumb{width:22px;height:22px}

/* ---------- rangée de commandes ---------- */

.lect-cmd{
  display:flex;align-items:center;justify-content:center;
  gap:var(--lg);flex-wrap:nowrap;margin-top:2px;
}
/* nowrap : seule la cale cède quand la place manque, les boutons gardent leur
   taille au lieu de passer à la ligne. */
.lect-cmd .lect-b{flex-shrink:0}
.lect-cale{flex:1 1 0;min-width:0;height:1px}
.lect-fin{flex:1 1 auto;display:flex;justify-content:flex-end}
.lect-cmd .lect-vit{flex:0 0 auto;min-width:var(--lv);padding-inline:0;text-align:center}
.lect .lect-b{
  position:relative;
  width:var(--lb);height:var(--lb);flex:0 0 auto;
  display:grid;place-items:center;
  background:transparent;color:var(--lect-fg);
  border:1px solid var(--lect-rail);border-radius:50%;
  cursor:pointer;padding:0;
  transition:color .18s,border-color .18s,background-color .18s;
}
.lect-b svg{width:26px;height:26px;fill:currentColor;display:block}
.lect .lect-b:hover{color:var(--lect-accent);border-color:var(--lect-accent);filter:none;transform:none}
.lect .lect-b:focus-visible{outline:2px solid var(--lect-focus);outline-offset:2px}
.lect .lect-b:active{transform:scale(.94)}

/* Le nombre est posé au centre du bouton : la valeur doit se lire d'un coup d'œil. */
.lect-n{
  display:grid;place-items:center;
  font-size:.86rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;pointer-events:none;
}

/* Sauts : l'arc et le nombre occupent la même case de la grille ; l'arc est
   tracé au bord du disque et le nombre rétréci tient dans son creux. Le saut
   avant est le même dessin retourné. */
.lect-saut svg,
.lect-saut .lect-n{grid-area:1/1}
.lect-saut svg{width:100%;height:100%;fill:currentColor}
.lect-saut .lect-n{font-size:.7rem;letter-spacing:0}
.lect-saut-avance svg{transform:scaleX(-1)}

/* Vitesse : aux bornes (0,5× et 2×) le bouton s'éteint au lieu de disparaître —
   la rangée ne doit pas changer de largeur sous le doigt. */
.lect .lect-vitpas:disabled{opacity:.32;cursor:default}
.lect .lect-vitpas:disabled:hover{color:var(--lect-fg);border-color:var(--lect-rail)}

.lect .lect-pp{
  width:var(--lp);height:var(--lp);
  color:var(--lect-accent);border:2px solid var(--lect-accent);
}
.lect-pp svg{width:30px;height:30px}
.lect .lect-pp:hover{color:var(--lect-bg);background:var(--lect-accent);border-color:var(--lect-accent)}
.lect--joue .lect-pp{color:var(--lect-bg);background:var(--lect-accent)}

/* ---------- pied : reprise, téléchargement, messages ---------- */

/* Le pied ne prend de la hauteur que lorsqu'il a quelque chose à dire. */
.lect-pied{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.lect-pied:not(:has(:not(:empty))){margin:0;height:0;overflow:hidden}
.lect .lect-vit{
  min-height:44px;min-width:66px;padding:8px 16px;
  background:transparent;color:var(--lect-fg);
  border:1px solid var(--lect-rail);border-radius:999px;
  font:inherit;font-size:.85rem;font-variant-numeric:tabular-nums;font-weight:500;
  cursor:pointer;transition:color .18s,border-color .18s;
}
.lect .lect-vit:hover{color:var(--lect-accent);border-color:var(--lect-accent);filter:none;transform:none}
.lect .lect-vit:focus-visible{outline:2px solid var(--lect-focus);outline-offset:2px}

.lect-reprise{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  color:var(--lect-fg);font-size:.85rem;
}
.lect .lect-lien{
  display:inline-block;background:none;border:none;padding:10px 2px;min-height:44px;
  color:var(--lect-focus);font:inherit;font-size:.85rem;line-height:1.4;
  text-decoration:underline;cursor:pointer;border-radius:0;
}
.lect .lect-lien:hover{filter:none;transform:none;color:var(--lect-accent)}
.lect .lect-lien:focus-visible{outline:2px solid var(--lect-focus);outline-offset:2px}
.lect-msg{color:var(--lect-erreur);font-size:.85rem;line-height:1.4}

/* Zone d'annonce vocale : lue par les lecteurs d'écran, invisible à l'œil. */
.lect-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---------- chapitres ---------- */

.lect-chapitres{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.lect .lect-chap{
  display:flex;align-items:center;gap:10px;width:100%;min-height:40px;
  padding:6px 10px;background:transparent;color:var(--lect-fg);
  border:none;border-radius:8px;text-align:left;font-size:.88rem;cursor:pointer;
  transition:color .18s,background-color .18s;
}
.lect .lect-chap:hover{color:var(--lect-accent);filter:none;transform:none}
.lect .lect-chap:focus-visible{outline:2px solid var(--lect-focus);outline-offset:-2px}
.lect .lect-chap--actif{color:var(--lect-accent);background:color-mix(in srgb,var(--lect-accent) 12%,transparent)}
.lect-chap-t{font-variant-numeric:tabular-nums;font-size:.8rem;min-width:3.2em;opacity:.8}
.lect-chap-l{flex:1 1 auto;min-width:0}

/* ---------- panne : on rend la main au lecteur natif ---------- */

.lect--ko .lect-barre,
.lect--ko .lect-cmd,
.lect--ko .lect-chapitres{display:none}
.lect--ko audio.lect-natif{display:block;width:100%;margin-bottom:8px}

/* ---------- variante compacte (listes, cartes, colonnes étroites) ---------- */

.lect--compact{--lb:42px;--lp:50px;--lg:6px;--lrail:6px;margin-top:6px}
.lect--compact .lect-t{font-size:.78rem}
.lect--compact .lect-b svg{width:24px;height:24px}
.lect--compact .lect-pp svg{width:26px;height:26px}
.lect--compact .lect-vit{min-height:40px;min-width:60px;padding:6px 13px;font-size:.8rem}

/* ---------- écrans étroits ---------- *
   Une seule rangée : les sauts descendent à 40 px à l'œil (la cible tactile
   reste à 44 px grâce au débord invisible) et la cale disparaît. Le lecteur
   tient autour de 105 px de haut. */
@media (max-width:430px){
  .lect{
    --lb:40px;--lp:50px;--lg:6px;
    display:grid;grid-template-columns:1fr;align-items:center;row-gap:4px;
  }
  .lect-barre{grid-row:1;gap:7px}
  .lect-cmd{grid-row:2;gap:var(--lg)}
  .lect-pied{grid-row:3;margin:0;gap:6px}
  .lect-chapitres{grid-row:4;margin-top:2px}
  .lect-cale,.lect-fin{flex:0 0 auto}
  .lect--compact{--lb:38px;--lp:46px;--lg:5px}
  .lect-b::after{
    content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }
  .lect-b svg{width:22px;height:22px}
  .lect-pp svg{width:26px;height:26px}
  .lect-t{font-size:.76rem;min-width:2.7em}
  .lect .lect-vit{min-height:40px;min-width:52px;padding:6px 10px;font-size:.78rem}
}
@media (max-width:360px){
  .lect{--lb:44px;--lp:54px;--lg:6px;--lv:52px}
  .lect-b svg{width:24px;height:24px}
  .lect-saut svg{width:100%;height:100%}
}
@media (max-width:340px){
  .lect{--lb:40px;--lp:48px;--lg:6px;--lv:46px;margin-inline:-4px}
  .lect .lect-vit{min-height:40px;font-size:.74rem}
}

/* Confort réduit : pas d'animation de bouton. */
@media (prefers-reduced-motion:reduce){
  .lect-b,.lect-vit,.lect-chap{transition:none}
  .lect .lect-b:active{transform:none}
}