/* ═══════════════════════════════════════════════════════════════════════
   L'EMPILEMENT DES RESULTATS SUR TELEPHONE
   assets/style/pages/matching-empilement-mobile.css

   Demande du 2026-08-26 : sur ordinateur, les cartes de resultat s'empilent
   au defilement ; sur telephone, non, et Maikel veut le meme geste partout.

   CE N'EST PAS UNE CORRECTION DE BOGUE. matching-choregraphies.css borne
   volontairement l'empilement a (min-width: 640px) and (min-height: 720px)
   et le degrade en cascade de fondus en dessous, au motif que « le catalogue
   deconseille les scenes epinglees quand le public est majoritairement sur
   telephone ». Cette feuille RENVERSE cette decision, jugee a l'oeil sur le
   banc d'essai puis validee le 2026-08-26 pour la page publique.

   PUREMENT ADDITIVE, ET C'EST VOULU
   Aucune ligne de matching-choregraphies.css n'est modifiee : on redeclare
   ici, pour les petits ecrans, les regles que la feuille d'origine reserve
   aux grands, et on neutralise le fondu qu'elle leur applique.

   Les regles auraient pu etre fondues dans matching-choregraphies.css, ce
   qui eviterait d'avoir l'empilement decrit a deux endroits. On ne l'a pas
   fait : le 2026-08-26, une autre session travaillait sur le moteur de
   matching, et le portage devait toucher le moins de fichiers partages
   possible. Fusionner reste souhaitable une fois ce chantier commite ; en
   attendant, retirer la balise <link> des deux pages suffit a revenir au
   comportement d'origine.

   Liee par trouver-mon-auto-ecole.php et par
   test-matching-illustrations.php, dans les deux cas APRES
   matching-choregraphies.css.

   POURQUOI LE JAVASCRIPT N'A PAS BESOIN DE CHANGER
   matching-choregraphies.js choisit lui aussi entre deux reglages selon la
   meme borne (MQ_EPINGLE, ligne 34), mais ces deux reglages ne different que
   par le decalage en cascade et la marge de l'observateur, c'est-a-dire par
   le MOMENT ou la classe .is-in est posee. Or en mode epingle, .is-in ne
   commande plus l'apparition de la carte (il n'y a pas de fondu) mais
   seulement le compteur de score. Le laisser sur son reglage telephone
   avance donc un peu le depart des jauges, et rien d'autre. Toucher au JS
   partage pour cela aurait ete disproportionne.

   POURQUOI 680 px DE HAUTEUR MINIMUM
   Mesure au navigateur le 2026-08-26, quatre resultats sur un ecran de
   390 x 844 : les cartes font 444, 491, 435 et 451 px de haut, et la
   quatrieme s'epingle a 146 px (92 + 3 x 18). Il faut donc au moins
   146 + 491 = 637 px de fenetre pour que la carte la plus haute tienne une
   fois epinglee. Le seuil est pose a 680 px, avec un peu de marge : sous
   cette hauteur (iPhone SE, telephone en paysage, petite fenetre de
   bureau), la carte deborderait et la pile ne se lirait plus, on y laisse
   donc la cascade de fondus d'origine.

   @see assets/style/pages/matching-choregraphies.css   la feuille d'origine
   @see test-matching-illustrations.php                 le banc d'essai
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) and (min-height: 680px) {

  /* Le header flottant est plus bas sur telephone : 8 px de decalage plus
     68 px de hauteur sous 480 px de large (components.css), 10 + 72 px
     au-dessus, contre 16 + 80 px sur ordinateur. Garder les 112 px de
     matching-choregraphies.css epinglerait les cartes 20 px trop bas et
     laisserait une bande vide sous le header. */
  .matching-page .bdm-choreo {
    --bdmc-top: 98px;
    display: block;
    /* De l'air sous la pile : sans course, la derniere carte n'atteint
       jamais sa hauteur d'epinglage et l'empilement ne se voit pas. Plus
       serre que les 42vh de l'ordinateur, un ecran de telephone etant deja
       long a parcourir. */
    padding-bottom: 30vh;
  }

  .matching-page .bdm-choreo .bdm-card {
    position: sticky;
    top: calc(var(--bdmc-top) + var(--bdmc-i) * var(--bdmc-tranche));
    margin-bottom: 22px;
    /* 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 laissee par la carte du dessus se confond avec elle et le
       recouvrement ne se voit pas. */
    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; }

  /* Neutralisation du fondu telephone de matching-choregraphies.css. Meme
     selecteur, donc meme specificite : c'est l'ordre des feuilles qui
     tranche, d'ou l'obligation de lier celle-ci APRES. Une carte a demi
     transparente qui en recouvre une autre laisse lire les deux en meme
     temps, et le seuil que produit l'empilement disparait. */
  .matching-page .bdm-choreo.is-armed .bdm-card,
  .matching-page .bdm-choreo.is-armed .bdm-card.is-in {
    opacity: 1;
    transition: none;
    transition-delay: 0s;
  }
}

/* Sous 480 px de large, le header perd encore 6 px (8 + 68 au lieu de
   10 + 72) : la pile se recale d'autant. */
@media (max-width: 480px) and (min-height: 680px) {
  .matching-page .bdm-choreo { --bdmc-top: 92px; }
}