/* ==========================================================================
   B2V - Couche scroll native (2026)
   Cree le 31/08/2026.

   Animations pilotees par le defilement en CSS natif : animation-timeline
   scroll() et view(). Elles tournent sur le thread compositeur, donc aussi
   fluides que le scroll lui-meme, et ne coutent aucun JavaScript.

   Support : Chrome 115+, Edge 115+, Firefox 132+, Safari 18+ (~84 % mi-2026).
   Tout est enferme dans @supports : les navigateurs plus anciens gardent la
   revelation JavaScript existante. Aucune regression possible.

   Regle de performance respectee : on n'anime que transform et opacity.
   Jamais width, height ou margin, qui declenchent un recalcul de mise en page.
   ========================================================================== */

@supports (animation-timeline: scroll()) {

  @media (prefers-reduced-motion: no-preference) {

    /* ----------------------------------------------------------------------
       1. BARRE DE PROGRESSION DE LECTURE
       Se remplit au fil du defilement. Sur une fiche longue, elle indique
       ou l'on en est. Bordeaux vers or : signature de la marque.
       -------------------------------------------------------------------- */
    .b2v-progress{
      position:fixed;
      top:0; left:0; right:0;
      height:4px;
      z-index:9999;
      transform-origin:0 50%;
      background:linear-gradient(90deg,#60222D 0%,#7a2d3a 45%,#E0C26A 100%);
      animation:b2vProgress linear;
      animation-timeline:scroll(root block);
      pointer-events:none;
    }
    @keyframes b2vProgress{
      from{ transform:scaleX(0); }
      to{ transform:scaleX(1); }
    }

    /* ----------------------------------------------------------------------
       2. REVELATION AU DEFILEMENT, VERSION NATIVE
       Remplace la revelation JavaScript la ou le navigateur sait faire.
       entry 5% -> entry 45% : l'element finit son entree bien avant d'etre
       au centre, donc rien ne "clignote" sous les yeux du lecteur.
       -------------------------------------------------------------------- */
    .ev-card,
    .im-card,
    .bc-card,
    .ep-ocard,
    .pc-ocard,
    .hm-tool,
    .hm-step,
    .b2v-cards-grid > *,
    .b2v-prog-item{
      animation:b2vRise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 65%;
    }
    @keyframes b2vRise{
      from{ opacity:0; transform:translateY(70px) scale(.90); }
      to{   opacity:1; transform:none; }
    }

    /* Titres de section : montee plus discrete. */
    .hm-vedettes-head,
    .hm-tools-head,
    .b2v-visite-t,
    .ep-h2,
    .pc-h2{
      animation:b2vRiseSoft linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    @keyframes b2vRiseSoft{
      from{ opacity:0; transform:translateY(44px); }
      to{   opacity:1; transform:none; }
    }

    /* ----------------------------------------------------------------------
       3. PARALLAXE DU HERO
       L'image de fond se deplace plus lentement que la page. Effet de
       profondeur, cout nul : une seule transformation composee.
       -------------------------------------------------------------------- */
    .hm-hero{ overflow:hidden; }
    .hm-hero-in{
      animation:b2vParallax linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes b2vParallax{
      from{ transform:translateY(0) scale(1);      opacity:1; }
      to{   transform:translateY(-150px) scale(1.06); opacity:.25; }
    }

    /* ----------------------------------------------------------------------
       4. BANDE DE CHIFFRES : le sceau respire au passage
       -------------------------------------------------------------------- */
    .hm-ring{
      animation:b2vRing linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 55%;
    }
    @keyframes b2vRing{
      from{ transform:scale(.55) rotate(-16deg); opacity:0; }
      to{   transform:none; opacity:1; }
    }

    /* ----------------------------------------------------------------------
       5. GALERIE DE FICHE : leger zoom pendant la traversee de l'ecran
       -------------------------------------------------------------------- */
    .ep-gal-main,
    .pc-gmain{
      animation:b2vZoom linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes b2vZoom{
      from{ transform:scale(1.16); }
      to{   transform:scale(1); }
    }

    /* ----------------------------------------------------------------------
       6. EN-TETE : ombre qui apparait des le premier defilement
       -------------------------------------------------------------------- */
    .b2v-head{
      animation:b2vHead linear both;
      animation-timeline:scroll(root block);
      animation-range:0 90px;
    }
    @keyframes b2vHead{
      from{ box-shadow:0 0 0 rgba(17,24,39,0); }
      to{   box-shadow:0 6px 26px rgba(17,24,39,.20); }
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ----------------------------------------------------------------------
       7. CASCADE
       Les cartes d'une meme rangee n'arrivent pas au meme instant : on decale
       leur plage d'animation. L'oeil suit le mouvement de gauche a droite
       plutot que de subir un bloc qui apparait d'un coup.
       -------------------------------------------------------------------- */
    .ev-cards > *:nth-child(3n+2),
    .b2v-cards-grid > *:nth-child(3n+2),
    .hm-steps > *:nth-child(2){
      animation-range:entry 6% entry 72%;
    }
    .ev-cards > *:nth-child(3n+3),
    .b2v-cards-grid > *:nth-child(3n+3),
    .hm-steps > *:nth-child(3){
      animation-range:entry 12% entry 80%;
    }

    /* ----------------------------------------------------------------------
       8. BANDE D'APPEL A L'ACTION : elle se rapproche du lecteur
       -------------------------------------------------------------------- */
    .b2v-cta,
    .b2v-alerte,
    .hm-tools-grid{
      animation:b2vApproche linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
    @keyframes b2vApproche{
      from{ opacity:0; transform:scale(.92) translateY(60px); }
      to{   opacity:1; transform:none; }
    }

    /* ----------------------------------------------------------------------
       9. IMAGES DES SECTIONS : glissement lateral
       -------------------------------------------------------------------- */
    .hm-feat-img{
      animation:b2vGlisse linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
    @keyframes b2vGlisse{
      from{ opacity:0; transform:translateX(-70px); }
      to{   opacity:1; transform:none; }
    }
    .hm-feat.rev .hm-feat-img{
      animation-name:b2vGlisseD;
    }
    @keyframes b2vGlisseD{
      from{ opacity:0; transform:translateX(70px); }
      to{   opacity:1; transform:none; }
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ----------------------------------------------------------------------
       10. COUVERTURE COMPLETE DU SITE
       Classes relevees sur le HTML rendu de chaque gabarit, pas inventees.
       -------------------------------------------------------------------- */

    /* Academie : cartes de cours et parcours */
    .ac-card,
    .ac-pcard,
    .ac-teaser,
    /* Courtiers : cartes de l'annuaire */
    .bc-card,
    /* Fiche courtier */
    .cp-card,
    .cp-whyc,
    .cp-kpi,
    /* Fiche cours */
    .cs-rc,
    .cs-mod,
    /* Fiche entreprise */
    .ep-carac-i,
    .ep-stat,
    .ep-ocard,
    .ep-col,
    /* Fiche immeuble */
    .pc-tile,
    .pc-ocard,
    .pc-lcard,
    /* Contact */
    .ct-tcard,
    .ct-stat,
    .ct-pitem,
    /* Bandes communes a toutes les pages */
    .b2v-ex-card{
      animation:b2vRise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 65%;
    }

    /* Titres de section de chaque gabarit */
    .cp-h2,
    .cs-sec > h2,
    .ct-h2,
    .ac-card-title,
    .ct-eyebrow{
      animation:b2vRiseSoft linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }

    /* Blocs larges : approche douce plutot que montee */
    .cp-block,
    .pc-block,
    .cs-sec,
    .ct-sec,
    .ep-prev{
      animation:b2vApproche linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }

    /* Cascade sur les grilles de ces gabarits */
    .ac-card:nth-child(3n+2),
    .bc-card:nth-child(3n+2),
    .ep-carac-i:nth-child(4n+2),
    .pc-tile:nth-child(4n+2),
    .ct-tcard:nth-child(3n+2){
      animation-range:entry 6% entry 72%;
    }
    .ac-card:nth-child(3n+3),
    .bc-card:nth-child(3n+3),
    .ep-carac-i:nth-child(4n+3),
    .pc-tile:nth-child(4n+3),
    .ct-tcard:nth-child(3n+3){
      animation-range:entry 12% entry 80%;
    }

    /* Photos de courtier : leger zoom a la traversee */
    .bc-photo,
    .ac-thumb{
      animation:b2vZoom linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }

    /* Anneaux de progression des donnees financieres */
    .ep-donut{
      animation:b2vRing linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 50%;
    }
  }
}

/* Sans support natif, la barre de progression n'a aucun sens : on la cache. */
@supports not (animation-timeline: scroll()){
  .b2v-progress{ display:none; }
}

/* Respect absolu de la preference utilisateur. */
@media (prefers-reduced-motion: reduce){
  .b2v-progress{ display:none; }
}