/*
 * LE SITE PUBLIC eqnx.vc — LE DÉFILEMENT DE L'ACCUEIL AU TÉLÉPHONE (07/11/2026 ; Alex, sur la production de #680 : « sur
 * mobile je ne vois pas la différence » — il veut le téléphone aussi « façon Apple » ; prototype #685, validé par Alex le
 * 07/11/2026 ; decisions.md §9.2 n°287 ; claude-docs/modules/site-public.md §12). Le pendant téléphone de
 * site-defilement.css (§11), chargée APRÈS elle sur l'accueil (EN et FR, html[data-defilement]) ; tout est SOUS 641 px :
 * l'ordinateur ne change pas.
 *
 * Ce qu'elle fait au téléphone (et site-defilement-mobile.js, son pendant) :
 *   1. des APPARITIONS plus franches, cadencées par le défilement : montée de 32 px et agrandissement 0,96 → 1, sans flou
 *      (transform et opacité seulement) ; la 2e colonne de l'équipe part nettement après la 1re ;
 *   2. LES CARTES QUI S'EMPILENT — les quatre secteurs, puis les trois principes de la thèse : chaque carte colle sous la
 *      barre (10 px plus bas que la précédente : la pile se lit), la suivante glisse par-dessus ; celle du dessous se
 *      réduit (jusqu'à 0,94) et s'assombrit (jusqu'à 55 %) ; ses Lottie se mettent en pause quand elle est couverte. Aucune
 *      hauteur ajoutée (la page garde sa longueur) ; posé par le script (html.s-ap-pile, --s-empile) ;
 *   3. le HERO recule plus nettement (échelle 0,86, 12 svh plus haut ; la couronne s'ouvre à 1,18) ;
 *   4. l'énoncé d'About en deux temps et la suite qui attend : ceux de l'ordinateur (§11), gardés.
 * prefers-reduced-motion : rien de tout cela. Aucun scroll-jacking, aucune position fixe (rien ne saute avec la barre
 * d'adresse d'iOS : des `top` en px sous la barre du site, des hauteurs en svh). Pas de !important ; aucune .eq-* redéfinie.
 */

@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  html[data-defilement]{--s-mob-montee:32px;--s-mob-echelle:.96}

  @keyframes s-mob-entree{
    from{opacity:0;transform:translate3d(0,var(--s-mob-montee),0) scale(var(--s-mob-echelle))}
    to{opacity:1;transform:none}
  }
  @keyframes s-mob-hero-sortie{to{opacity:0;transform:translate3d(0,-12svh,0) scale(.86)}}
  @keyframes s-mob-anneau{to{scale:1.18;opacity:.3}}

  /* la 2e colonne de l'équipe (2 colonnes au téléphone) part nettement après la 1re */
  html[data-defilement] .s-tm>li:nth-child(2n){--s-ap-d:72px;--s-ap-retard:.12s}

  /* ── 1. les apparitions (scroll-driven) : l'énoncé, sa seconde ligne et « Why EQNX? » gardent celles de §11 ── */
  @supports (animation-timeline:view()){
    html[data-defilement] [data-site-apparait]:not(.s-statement,.s-why){
      animation-name:s-mob-entree;
      animation-range:cover var(--s-ap-d) cover calc(28% + var(--s-ap-d));
    }
    html[data-defilement] .s-why{animation-name:s-mob-entree}
    /* ── 3. le hero recule plus nettement ── */
    html[data-defilement] .s-h1{animation-name:s-mob-hero-sortie;animation-range:exit 0% exit 60%}
    html[data-defilement] .s-ring{animation-name:s-ring,s-mob-anneau}
  }
  /* le repli (sans scroll-driven animations) : la même entrée, en transition */
  html.s-ap-io[data-defilement] [data-site-apparait]:not(.s-statement,.s-ap-vu){transform:translate3d(0,var(--s-mob-montee),0) scale(var(--s-mob-echelle))}

  /* ── 2. les cartes qui s'empilent (html.s-ap-pile, posé par site-defilement-mobile.js) ──
     Chaque carte colle sous la barre, 10 px plus bas que la précédente ; elle a le fond de la page (la suivante la
     couvre) et une ombre douce en haut (on voit la carte arriver) ; --s-empile (0 → 1, le script) : la part couverte
     par la suivante — elle se réduit (`scale`, à part du `transform` de l'apparition) et s'assombrit (un voile, ::after). */
  html.s-ap-pile[data-defilement] :is(.s-vert,.s-th)>li{position:sticky;top:calc(var(--eq-barre-h) + var(--s-pile-i,0) * 10px);
    background:var(--eq-fond);transform-origin:50% 0;scale:calc(1 - var(--s-empile,0) * .06);
    box-shadow:0 -16px 28px -18px #000000B3}
  html.s-ap-pile[data-defilement] :is(.s-vert,.s-th)>li::after{content:"";position:absolute;inset:0;background:#000;pointer-events:none;
    opacity:calc(var(--s-empile,0) * .55)}
  html.s-ap-pile[data-theme=clair][data-defilement] :is(.s-vert,.s-th)>li{box-shadow:0 -16px 28px -18px #0A090840}
  html.s-ap-pile[data-theme=clair][data-defilement] :is(.s-vert,.s-th)>li::after{background:#0A0908;opacity:calc(var(--s-empile,0) * .18)}
  html.s-ap-pile[data-defilement] :is(.s-vert,.s-th)>li:nth-child(2){--s-pile-i:1}
  html.s-ap-pile[data-defilement] :is(.s-vert,.s-th)>li:nth-child(3){--s-pile-i:2}
  html.s-ap-pile[data-defilement] :is(.s-vert,.s-th)>li:nth-child(4){--s-pile-i:3}
  /* la thèse : son premier principe a une marge haute de 0 et pas de filet — la carte en reçoit un, comme les autres */
  html.s-ap-pile[data-defilement] .s-th>li{border-top:1px solid var(--eq-filet)}
}