/* =========================================================
   flottement-modele.css
   BRVMH-FLOTTEMENT-V2

   L'effet de flottement au defilement : les blocs arrivent
   plus petits et transparents, puis grandissent en se
   remettant en place.

   Memes valeurs que le support, le parrainage et l'accueil :
   93 % pour les grands blocs, 97 % pour les elements legers,
   point d'origine decale vers le bas pour qu'ils semblent
   monter vers le lecteur plutot que gonfler sur place.

   ---------------------------------------------------------
   COMMENT S'EN SERVIR

   1. Charger cette feuille EN DERNIER :
        <link rel="stylesheet" href="/assets/css/flottement-modele.css">

   2. Ajouter le script flottement-modele.js avant </body> :
        <script src="/js/flottement-modele.js"></script>

   Le script pose « bh-anim » sur <html> et marque les blocs.
   Sans lui, aucun bloc n'est masque : une page sans
   JavaScript reste entierement lisible.

   ---------------------------------------------------------
   CE QUI EST DEJA PREVU

   Les familles de classes du projet sont couvertes : su- pour
   le support, pr- pour le parrainage, ep- cp- pt- pour les
   partenaires, et les classes generiques des maquettes.
   Une classe absente d'une page ne coute rien.

   Pour ajouter une classe, editer LOURDS ou LEGERS dans le
   fichier .js — pas ici.
   ========================================================= */

/* Les deux etats, et leur transition. Poses sur l'element des
   qu'il est marque, avant meme qu'il soit vu. */
.bh-flot,
.bh-flot-fin {
  transform-origin: center 60%;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/* Le masquage ne s'applique QUE si le script a tourne. C'est
   la garantie qu'une page sans JavaScript ne se retrouve pas
   vide. */
html.bh-anim .bh-flot {
  opacity: 0;
  transform: translateY(26px) scale(.93);
}
html.bh-anim .bh-flot-fin {
  opacity: 0;
  transform: translateY(12px) scale(.97);
}

/* L'etat revele. */
html.bh-anim .bh-flot.vu,
html.bh-anim .bh-flot-fin.vu {
  opacity: 1;
  transform: none;
}

/* --- Ce qui ne doit jamais flotter ---------------------- */

/* Un bloc vise par une ancre apparait aussitot : sinon on
   arrive dessus alors qu'il est encore transparent. */
html.bh-anim :target,
html.bh-anim :target .bh-flot,
html.bh-anim :target .bh-flot-fin {
  opacity: 1 !important;
  transform: none !important;
}

/* Les panneaux qui s'ouvrent et se ferment, changent de
   hauteur ou recoivent leur contenu par vagues : l'effet les
   faisait apparaitre puis disparaitre a chaque mouvement. */
html.bh-anim .pa .bh-flot,
html.bh-anim .pa .bh-flot-fin,
html.bh-anim .pa-adm .bh-flot,
html.bh-anim .pa-adm .bh-flot-fin,
html.bh-anim .pa.bh-flot,
html.bh-anim .pa-adm.bh-flot {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Les elements en position fixe — barres, bulles, bandeaux —
   ne flottent pas : ils ne defilent pas avec la page. */
html.bh-anim .m-head.bh-flot,
html.bh-anim .bnav.bh-flot,
html.bh-anim .bas.bh-flot,
html.bh-anim .cta-bas.bh-flot,
html.bh-anim .bulle.bh-flot {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Accessibilite -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.bh-anim .bh-flot,
  html.bh-anim .bh-flot-fin {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}