Annonce avec progression de lecture

{%- comment -%} NAHNAH AI · Annonce avec progression de lecture {%- endcomment -%}
<div class="nn-annonces-progression-lecture" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  {%- if section.settings.message != blank -%}
  <p>{{ section.settings.message | escape }}{%- if section.settings.lien != blank -%} <a href="{{ section.settings.lien }}">{{ section.settings.texte_lien | escape }}</a>{%- endif -%}</p>
  {%- endif -%}
  <span class="nn-annonces-progression-lecture__ligne" aria-hidden="true"></span>
</div>
{% schema %}
{"name":"Progression de lecture","settings":[
{"type":"text","id":"message","label":"Message","default":"Bonne lecture ! Une question ? On te répond sous 24 h."},
{"type":"text","id":"texte_lien","label":"Texte du lien","default":"Nous écrire"},
{"type":"url","id":"lien","label":"Lien"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFFFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#111827"},
{"type":"color","id":"couleur_accent","label":"Ligne de progression","default":"#6366F1"}],
"presets":[{"name":"Annonce avec progression de lecture"}]}
{% endschema %}

{% stylesheet %}
/* Barre collante avec ligne de progression */
.nn-annonces-progression-lecture{position:sticky;top:0;z-index:30;background:var(--nn-fond);color:var(--nn-texte);padding:9px 16px 11px;text-align:center;font-size:14px;box-shadow:0 1px 0 color-mix(in srgb,var(--nn-texte) 10%,transparent)}
.nn-annonces-progression-lecture p{margin:0}
.nn-annonces-progression-lecture a{color:var(--nn-accent);font-weight:700}
.nn-annonces-progression-lecture__ligne{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--nn-accent);transform-origin:left;transform:scaleX(var(--nn-progression,0));border-radius:0 3px 3px 0}
@media (prefers-reduced-motion: reduce){.nn-annonces-progression-lecture__ligne{transition:none}}
{% endstylesheet %}

{% javascript %}
// Remplit la ligne selon la part de page déjà lue
(function () {
  var barres = document.querySelectorAll('.nn-annonces-progression-lecture');
  if (!barres.length) { return; }
  var attente = false;
  function maj() {
    var total = document.documentElement.scrollHeight - window.innerHeight;
    var ratio = total > 0 ? Math.min(1, Math.max(0, window.scrollY / total)) : 0;
    barres.forEach(function (b) { b.style.setProperty('--nn-progression', ratio.toFixed(4)); });
    attente = false;
  }
  window.addEventListener('scroll', function () {
    if (!attente) { attente = true; window.requestAnimationFrame(maj); }
  }, { passive: true });
  window.addEventListener('resize', maj);
  maj();
})();
{% endjavascript %}