/* =========================================================================
   MUSLIMA WORK — LA BARRE DE LECTURE, SUR TÉLÉPHONE

   Un fil de cinq pixels collé au haut de la fenêtre, qui se remplit à mesure
   qu'on descend dans la page. Il reprend les couleurs de la maison : une piste
   de prune profond, le dégradé du bouton principal en remplissage, et un petit
   losange nacré au bout, dans un halo rose.

   Elle était une capsule flottante en bas de l'écran, et c'est ce qui est
   corrigé ici. Posée là, elle passait devant les cartes, les boutons et le
   pied de page pendant tout le défilement, et il fallait creuser cent
   vingt-huit pixels de vide sous la signature pour qu'on puisse encore la
   lire. Le vide est retiré avec elle (voir footer.css) : en haut, la barre ne
   recouvre plus rien.

   Elle ne se voit qu'en dessous de 768 px, et il n'y a rien à préserver
   au-dessus : sur grand écran, cette barre n'existe pas — elle n'y est pas
   affichée et le script ne s'y attache à rien. La correction ne peut donc pas
   toucher au bureau.

   Elle ne bloque rien : le fil et tout ce qu'il contient laissent passer le
   doigt et le clic. Voir components/BarreLecture.tsx.
   ========================================================================= */
.blec{display:none}

@media (max-width:767px){
  /* Le cadre du fil, tout en haut et d'un bord à l'autre.

     Il ne peint rien : c'est la piste, à l'intérieur, qui porte la couleur. Il
     est un peu plus haut qu'elle — douze pixels pour cinq —, et c'est ce qui
     permet au losange de tenir tout entier dans la fenêtre. Un repère de neuf
     pixels tourné d'un quart de tour mesure douze et sept de diagonale : posé
     au milieu d'une piste collée au premier pixel de l'écran, sa pointe haute
     serait sortie du cadre. Trois pixels d'avance la rentrent.

     « left » et « right » à zéro plutôt que « width:100vw » : sur un navigateur
     qui réserve une barre de défilement, cent pour cent de la fenêtre est plus
     large que la page, et le fil aurait fait déborder le document d'autant.

     Au-dessus de la barre collante, qui est à deux cents : le fil reste visible
     quand elle vient se poser dessous. Il ne la déplace pas et ne déplace rien
     — il est hors du flux, et il n'a jamais eu de place dans la page.

     Le repli d'écran des iPhone décale le tout vers le bas quand il y en a un,
     comme le fait la barre : en mode plein écran, le fil ne passe pas sous
     l'encoche. Dans un navigateur ordinaire, la valeur est nulle et le fil est
     bien au premier pixel. */
  .blec{
    position:fixed;z-index:210;
    top:env(safe-area-inset-top,0px);left:0;right:0;width:100%;
    display:block;height:12px;
    background:none;
    /* Elle ne prend jamais le doigt : ni elle, ni rien de ce qu'elle
       contient. Rien ici ne se saisit ni ne se tire — c'est une mesure, pas un
       réglage. */
    pointer-events:none;
    /* Elle paraît en fondu, à sa place : une opacité ne déplace rien. L'état
       de départ est ici, non dans le script — la page ne doit pas sauter au
       chargement. */
    opacity:0;
    transition:opacity 260ms var(--ease-out,ease);
  }
  .blec.est-la{opacity:1}

  /* La piste : cinq pixels, un prune profond de la marque à vingt-deux pour
     cent. C'est ce qui rend le fil lisible avant même qu'il se remplisse — à
     trois pixels et seize pour cent, il passait pour un filet de bordure sur
     le blanc et le rose pâle des sections.

     Ses bouts sont arrondis, et c'est le seul arrondi de l'ensemble : une
     capsule pleine aurait fait un objet posé sur la page, et deux angles
     francs, une règle. */
  .blec__piste{
    position:absolute;top:3px;left:0;right:0;height:5px;
    border-radius:999px;
    background:rgba(61,6,32,.22);
  }

  /* Le remplissage : le dégradé de la maison, celui du bouton principal —
     bordeaux, prune, framboise —, repris de gauche à droite et prolongé d'un
     rose plus clair sur le dernier quart. C'est ce dernier arrêt qui le tient
     visible quand le haut de la fenêtre tombe sur une section prune : le
     bordeaux du départ s'y confondrait.

     La mise à l'échelle part de la gauche — c'est le script qui la pose, image
     par image, sans jamais écrire de largeur ni recalculer de mise en page. Et
     elle va bien d'un bord à l'autre : à cent pour cent, le fil est plein. */
  .blec__part{
    position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
    border-radius:999px;
    background:linear-gradient(90deg,
      #7C1648 0%,
      #951753 26%,
      #C92D78 66%,
      #E0499A 100%);
  }

  /* La tête : un point de largeur nulle que le script déplace le long du fil.
     Le halo et le losange sont posés par rapport à lui — un seul mouvement.

     « --blec-reserve » est la demi-diagonale du losange, arrondie au pixel
     supérieur : c'est ce que le script retire de chaque bout de la course pour
     que le repère ne sorte jamais de la fenêtre, ni à zéro ni à cent pour
     cent. Sept pixels pour un losange de neuf tourné d'un quart de tour. */
  .blec{--blec-reserve:7px}
  .blec__tete{
    position:absolute;left:0;top:50%;width:0;height:0;
    transition:opacity 260ms var(--ease-out,ease);
  }
  /* Le halo : une lueur rose, centrée sur le losange et non traînée derrière
     lui. Très diluée, et large de deux fois le repère — elle éclaire sans
     cerner. Aucune animation propre, aucun clignotement : elle ne bouge qu'au
     défilement, avec le reste. */
  .blec__eclat{
    position:absolute;left:-13px;top:-9px;width:26px;height:18px;border-radius:999px;
    background:radial-gradient(closest-side,rgba(255,176,214,.55),rgba(255,176,214,0));
    filter:blur(2px);
  }
  /* Le losange, le même que celui de la transition des deux panneaux : neuf
     pixels tournés d'un quart de tour, cœur nacré, filet rose pâle. Ses angles
     sont adoucis — c'est ce qui permet à sa pointe haute d'affleurer le bord
     de l'écran sans qu'on la voie coupée.

     Une seule lueur, courte et blanche, pour le détacher du remplissage. Ni
     ombre portée, ni double halo : un repère, pas une poignée. */
  .blec__diamant{
    position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;
    rotate:45deg;border-radius:2px;
    background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 58%,#FDEAF3 100%);
    border:1px solid rgba(233,150,190,.70);
    box-shadow:0 0 4px rgba(255,255,255,.60);
  }
}

/* Mouvement réduit : la progression reste — c'est une information — mais elle
   se pose d'un coup, sans fondu ni rattrapage. Le script, de son côté, cesse
   d'interpoler. */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .blec,.blec__tete{transition:none}
}