/* ═══════════════════════════════════════════════════════════
   Mise en scene de l'ecran resultats du matching  BoostDriving

   UNE seule choregraphie, retenue le 2026-08-25 apres essai des trois :
   l'empilement. Les deux autres (fondu de Studio, rideaux d'Edition) ont
   ete retirees, elles ne servaient qu'a l'essai.

   Le geste est transpose de `edition/empilement` du corpus des 71 sections
   de MR Agence Web (skill site-sur-mesure) : « la premiere s'epingle a
   88 px du haut de l'ecran ; la deuxieme monte par-dessus et s'epingle a
   106 px, ne laissant voir de la premiere qu'une tranche de 18 px ». Ici
   l'epinglage part de 112 px, le header flottant occupant les 96 premiers.
   Ce n'est PAS le fragment : il vit sous un autre prefixe, un autre socle
   et une autre palette. Ce qui est repris, c'est le geste et ses valeurs.

   Le score, lui, emprunte a `atelier/jauges` : le nombre monte et la
   pastille se remplit quand la carte entre dans l'ecran.

   AUCUN changement de structure HTML : tout se joue en pseudo-elements et
   en variables, pour que renderResultCard() (assets/js/matching.js) reste
   tel quel le jour de l'integration.

   Portee : .bdm-choreo, pose sur la liste (.bdm-res-list) par le JS. Sans
   cette classe, rien de ce fichier ne s'applique, et la page servie sans
   JavaScript montre les cartes posees, completes et lisibles.
   ═══════════════════════════════════════════════════════════ */

.matching-page .bdm-choreo {
  /* Hauteur du header flottant (80 px) plus son decalage (16 px), plus
     16 px d'air : c'est la ou l'empilement vient se coller. */
  --bdmc-top: 112px;
  /* Tranche de la carte precedente laissee visible par la suivante. */
  --bdmc-tranche: 18px;
}

/* Rang de la carte dans la liste, pose par le JS : il commande la hauteur
   d'epinglage et l'ordre de recouvrement. */
.matching-page .bdm-choreo .bdm-card { --bdmc-i: 0; }

/* ─── Le compteur de score ────────────────────────────────
   La pastille se remplit par le bas pendant que le nombre monte. Le
   remplissage est un pseudo-element : la structure de .bdm-card__score
   (deux <span>) ne change pas. */
.matching-page .bdm-choreo .bdm-card__score {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.matching-page .bdm-choreo .bdm-card__score::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 120, 87, .16);
  transform: scaleY(var(--bdmc-jauge, 0));
  transform-origin: 50% 100%;
  transition: transform .8s var(--bd2-ease-out);
}
.matching-page .bdm-choreo .bdm-card__score-val,
.matching-page .bdm-choreo .bdm-card__score-label { position: relative; }

/* Le nombre est en chasse fixe le temps qu'il compte : sans cela, la
   pastille change de largeur a chaque dizaine et la carte tressaute. */
.matching-page .bdm-choreo .bdm-card__score-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── L'empilement ────────────────────────────────────────
   Le catalogue deconseille les scenes epinglees quand le public est
   majoritairement sur telephone : sous 640 px de large, et sous 720 px de
   haut, le geste est degrade en fondu (plus bas). */
@media (min-width: 640px) and (min-height: 720px) {
  .matching-page .bdm-choreo {
    display: block;
    /* De l'air sous la pile, sans quoi la derniere carte n'a pas de
       course et l'empilement ne se voit jamais. */
    padding-bottom: 42vh;
  }
  .matching-page .bdm-choreo .bdm-card {
    position: sticky;
    top: calc(var(--bdmc-top) + var(--bdmc-i) * var(--bdmc-tranche));
    margin-bottom: 26px;
    /* La carte qui monte doit passer DEVANT celle qui la precede. */
    z-index: calc(var(--bdmc-i) + 1);
    /* Toutes les cartes sont blanches : sans ombre portee VERS LE HAUT,
       la tranche de 18 px laissee par la carte du dessus se confond avec
       elle et le recouvrement ne se voit pas. C'est cette ombre qui tient
       lieu de seuil, la ou edition/empilement se sert d'une teinte par
       carte. */
    box-shadow: 0 -10px 26px rgba(13, 18, 32, .10), var(--bdm-shadow-sm);
  }
  .matching-page .bdm-choreo .bdm-card:last-child { margin-bottom: 0; }
  /* AUCUN fondu ici, et c'est voulu : une carte a demi transparente qui
     recouvre la precedente laisse lire les deux en meme temps, et le
     seuil que produit l'empilement disparait. Le geste d'edition/
     empilement est fait d'aplats pleins qui se posent, rien n'y fond.
     Ce que la carte anime, c'est son score, quand elle entre. */
}

/* Degradation du geste epingle : telephone, ou ecran trop court pour que
   la pile ait une course. La carte se pose en fondu, en cascade. */
@media (max-width: 639px), (max-height: 719px) {
  .matching-page .bdm-choreo.is-armed .bdm-card { opacity: 0; }
  .matching-page .bdm-choreo.is-armed .bdm-card.is-in {
    opacity: 1;
    transition: opacity .38s var(--bd2-ease-out);
    transition-delay: calc(var(--bdmc-i) * 70ms);
  }
  .matching-page .bdm-choreo .bdm-card__score::before {
    transition: transform .9s var(--bd2-ease-out);
  }
}

/* ─── Mouvement reduit ────────────────────────────────────
   Les cartes sont posees, les jauges pleines, les scores ecrits (le JS
   s'arrete de son cote). L'empilement, lui, RESTE : ce n'est pas une
   animation, c'est une mise en page, et rien n'y bouge. */
@media (prefers-reduced-motion: reduce) {
  .matching-page .bdm-choreo.is-armed .bdm-card,
  .matching-page .bdm-choreo.is-armed .bdm-card.is-in {
    opacity: 1;
    transition: none;
  }
  .matching-page .bdm-choreo .bdm-card__score::before {
    transform: scaleY(1);
    transition: none;
  }
}