/* ============================================================
   Cascade d'etapes — mecanique partagee
   16/09
   ------------------------------------------------------------
   Nee dans la section #deroule d'evenement.html, sortie de la le
   16/09 pour servir les listes equivalentes des autres pages.
   Ce fichier ne connait aucune page et aucun identifiant : il
   agit sur l'attribut data-cascade, pose dans le HTML.

   Deux valeurs, une seule difference :
     data-cascade          → les items se posent un par un
     data-cascade="filet"  → idem, plus un filet vertical qui relie
                             les puces et se remplit au fur et a mesure

   Le filet suppose une puce en losange posee en absolu par la
   feuille d'origine de la liste. Il n'est donc pas universel : les
   listes a trait de separation (.exp-situations, .timeline) ou a
   tiret horizontal (.filtre-list) prennent data-cascade tout court,
   sinon le filet traverse des vides et des bordures.

   Geometrie de la puce, par famille de liste, en variables : le
   filet se cale dessus au pixel. Valeurs relevees dans pages.css.

   Pilote par js/cascade-etapes.js, qui ne fait que poser .is-on.

   Pour tout annuler sur une liste : retirer son attribut
   data-cascade. Pour tout annuler sur une page : retirer le <link>
   et le <script>.
   ============================================================ */

/* --- Geometrie des puces ------------------------------------------------
   Defaut = .fiche-list, la famille la plus repandue sur le site :
   pages.css la pose a left 0.1rem, top 1.05rem, 6px de cote. */
[data-cascade]{
  --puce-x: 0.1rem;
  --puce-y: 1.05rem;
  --puce-d: 6px;
}

/* .ecriture-list, dans pages.css : left 0.2rem, top 1.75rem, 7px. */
.ecriture-list[data-cascade]{
  --puce-x: 0.2rem;
  --puce-y: 1.75rem;
  --puce-d: 7px;
}


/* --- 1. Les items se posent un par un ----------------------------------
   Tout est conditionne a html.js. Sans JavaScript aucune de ces regles ne
   s'applique et les listes sont lisibles d'emblee : le contenu ne depend
   jamais du script. */
html.js [data-cascade] > li{
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity 0.8s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 0.8s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

html.js [data-cascade] > li.is-on{
  opacity: 1;
  transform: none;
}

/* Le libelle de l'etape arrive un souffle apres son corps de texte. Le
   decalage est court : au-dela, on attend le mot au lieu de le lire.

   Trois selecteurs parce que les listes du site nomment leur libelle de
   trois manieres : .etape-nom sur evenement, <b> sur .exp-situations,
   .tl-title sur la frise du parcours. Une liste sans libelle dedie ignore
   simplement ces regles. */
html.js [data-cascade] > li .etape-nom,
html.js [data-cascade] > li > b,
html.js [data-cascade] > li .tl-title{
  opacity: 0;
  transform: translateY(0.35rem);
  transition:
    opacity 0.7s 0.1s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 0.7s 0.1s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

html.js [data-cascade] > li.is-on .etape-nom,
html.js [data-cascade] > li.is-on > b,
html.js [data-cascade] > li.is-on .tl-title{
  opacity: 1;
  transform: none;
}


/* --- 2. Le filet, sur data-cascade="filet" uniquement -------------------
   Un segment par item plutot qu'un trait unique pose sur la liste : les
   segments se rejoignent d'eux-memes et suivent la hauteur reelle de
   chaque texte, sans aucune mesure en JavaScript. Un item rallonge d'une
   ligne ne casse rien.

   Le filet tombe a l'aplomb du centre de la puce, soit --puce-x plus la
   moitie de --puce-d, et son trait d'1px se cale un demi-pixel avant.

   Le remplissage passe par background-size, qui s'anime, sur un aplat
   laiton pose au-dessus du filet eteint. */
[data-cascade="filet"] > li{
  position: relative;
}

[data-cascade="filet"] > li::after{
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--puce-x) + var(--puce-d) / 2 - 0.5px);
  top: 0;
  bottom: 0;
  inline-size: 1px;
  background:
    linear-gradient(var(--brass), var(--brass)) no-repeat top center / 100% 0%,
    rgba(240, 234, 223, 0.12);
  transition: background-size 0.9s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

html:not(.js) [data-cascade="filet"] > li::after{ background-size: 100% 100%; }
[data-cascade="filet"] > li.is-on::after{ background-size: 100% 100%; }

/* Le filet part de la puce sur le premier item et s'arrete a la puce sur
   le dernier, au lieu de deborder en haut et en bas de la liste. */
[data-cascade="filet"] > li:first-child::after{ top: calc(var(--puce-y) + var(--puce-d) / 2); }
[data-cascade="filet"] > li:last-child::after{ bottom: calc(100% - var(--puce-y) - var(--puce-d) / 2); }

/* La puce passe devant le filet et s'allume avec son item. */
[data-cascade="filet"] > li::before{
  z-index: 2;
  background: rgba(182, 154, 104, 0.3);
  transition:
    background 0.7s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 0.7s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1)),
    box-shadow 0.7s var(--studio-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

html.js [data-cascade="filet"] > li::before{ transform: rotate(45deg) scale(0.45); }

[data-cascade="filet"] > li.is-on::before{
  background: var(--brass);
  transform: rotate(45deg) scale(1);
  /* Halo tres discret, juste de quoi signaler l'etape qui vient de se
     poser sans transformer la liste en tableau de bord. */
  box-shadow: 0 0 0 3px rgba(182, 154, 104, 0.12);
}


/* --- Mouvement reduit ---------------------------------------------------
   Tout est pose d'emblee. Le script n'ordonne deja aucune cascade dans ce
   mode ; ces regles sont la ceinture de securite si l'ordre de chargement
   change un jour. */
@media (prefers-reduced-motion: reduce){
  html.js [data-cascade] > li,
  html.js [data-cascade] > li .etape-nom,
  html.js [data-cascade] > li > b,
  html.js [data-cascade] > li .tl-title{
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js [data-cascade="filet"] > li::before{ transform: rotate(45deg) scale(1); transition: none; }
  [data-cascade="filet"] > li::after{ background-size: 100% 100%; transition: none; }
}