/* Le rideau : au défilement, « Deux façons de travailler avec nous » monte et recouvre le manifeste, qui s'efface et
   rétrécit pendant qu'il est couvert ; son entrée suit aussi le défilement : le surligneur passe sur chaque ligne et
   la découvre.
   rideau.js mesure le manifeste (--rd-haut, posée sur html : le bloc voisin la lit aussi) et pose html.rd-actif ;
   sans lui, en mouvement réduit, ou quand le manifeste ne tient pas dans l'écran, la page garde son ordre simple.

   La scène enveloppe le manifeste. Il s'y épingle au milieu de l'écran (position: sticky) ; aucun de ses parents ne
   porte d'overflow qui en ferait un conteneur de défilement, sans quoi l'épingle ne tiendrait plus. Le pied de la scène
   (::after) lui laisse la place de rester épinglé : sa hauteur, puis la tenue, le temps où il est seul au milieu de
   l'écran. Le bloc qui suit remonte d'autant (marge négative) et passe par-dessus.

   Les hauteurs d'écran se prennent en svh : la plus petite hauteur, barre d'adresse du téléphone déployée. Elle ne
   change pas quand la barre se replie : la phrase épinglée ne saute pas pendant le défilement (dvh la ferait glisser
   de la moitié de la barre), et elle n'est jamais cachée sous la barre. */
.rd-scene { position: relative; }

@media screen {
  /* --rd-centre : le haut du manifeste épinglé au milieu de l'écran, et la tenue ; --rd-pied : le temps qu'il reste
     épinglé, jusqu'à être couvert */
  html.rd-actif {
    --rd-centre: calc((100vh - var(--rd-haut, 0px)) / 2);
    --rd-centre: calc((100svh - var(--rd-haut, 0px)) / 2);
    --rd-pied: calc(var(--rd-haut, 0px) + var(--rd-centre));
  }
  html.rd-actif .rd-scene > .bs-manifeste { position: sticky; top: var(--rd-centre); }
  html.rd-actif .rd-scene::after { content: ""; display: block; height: var(--rd-pied); }
  /* une fois couvert, il ne se peint plus */
  html.rd-actif .rd-scene > .bs-manifeste.rd-couvert { visibility: hidden; }

  /* le rideau : la feuille blanche de « Deux façons », un bord arrondi, une ombre portée vers le haut */
  html.rd-actif .rd-scene + [data-bloc="facons"] {
    position: relative; z-index: 1; margin-top: calc(var(--rd-centre) - var(--rd-pied));
    background: var(--ha-blanc); border-radius: var(--ha-rayon) var(--ha-rayon) 0 0;
    box-shadow: 0 -1px 0 rgba(24, 25, 27, .06), 0 -30px 60px -34px rgba(24, 25, 27, .32);
  }

  /* le script le fait s'effacer et rétrécir au défilement ; un calque à lui le temps du passage */
  html.rd-actif .bs-manifeste-int { transform-origin: 50% 35%; }
  html.rd-actif .rd-proche .bs-manifeste-int { will-change: transform, opacity; }

  /* l'entrée suit le défilement : le script pose, ligne par ligne, la place du jaune (--mf-b, de -1 à 1) et la part
     du texte découverte (--mf-t, de 0 à 1) ; le texte se découvre de gauche à droite, au bord même du jaune qui s'en
     va ; les animations au temps de blocs-site.css se taisent */
  html.rd-actif .bs-js .bs-postit, html.rd-actif .bs-js .bs-balai, html.rd-actif .bs-js .bs-ligne-texte { animation: none !important; }
  html.rd-actif .bs-js .bs-ligne .bs-balai { transform: translateX(calc(var(--mf-b, -1.02) * 100%)); }
  html.rd-actif .bs-js .bs-ligne .bs-ligne-texte { opacity: 1; clip-path: inset(0 calc((1 - var(--mf-t, 0)) * 100%) 0 0); }
}