/* =========================================================
   barre-modele.css
   BRVMH-BARRE-V1

   La barre du bas et la feuille Application, au modele.

   Valeurs reprises telles quelles de page-parrainage-v3.css
   et de pages-communes.css. Aucune n'est inventee.

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

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

   2. Le corps doit porter la classe :
        <body class="rv" …>

   3. La page doit contenir le balisage de la barre et celui de
      la feuille — barre-modele.cjs les pose, ou les copie
      depuis une page de reference.

   ---------------------------------------------------------
   CE QUE FAIT CETTE FEUILLE

   La barre : une pilule sombre flottante, centree, six ronds
   de 52 px sans libelle. Les libelles existent dans le
   balisage — ils servent aux lecteurs d'ecran — mais restent
   masques a l'oeil : six mots sur 480 px se chevauchent.

   La feuille Application : elle monte du bas en 0,32 seconde,
   avec son voile. Fond noir, arrondi de 26 px, hauteur bornee
   a 76 % de la fenetre.
   ========================================================= */

/* =========================================================
   1. LA BARRE DU BAS
   ========================================================= */
body.rv .bnav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  /* Six entrees : elle doit pouvoir s'etendre, sans jamais
     depasser l'ecran. */
  max-width: calc(100vw - 24px) !important;
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(10, 10, 14, .9) !important;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: none !important;
  z-index: 1000 !important;
}

body.rv .bnav-item {
  position: relative;
  width: 52px !important;
  height: 50px !important;
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  color: rgba(255, 255, 255, .72) !important;
  background: none !important;
  transition: color .18s ease, background .18s ease;
}
body.rv .bnav-item i { font-size: 21px !important; }

/* Les libelles restent dans le balisage pour les lecteurs
   d'ecran, mais six mots sur 480 px se chevauchent. */
body.rv .bnav-item span:not(.bnav-soon) { display: none !important; }

body.rv .bnav-item:hover { color: #fff !important; }
body.rv .bnav-item.active,
body.rv .bnav-item.on,
body.rv .bnav-item.ici {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
}

/* La pastille : un point, pas un compteur. */
body.rv .bnav-soon {
  position: absolute;
  top: 8px !important;
  right: 10px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--or, #F0B840);
  font-size: 0;
}

body.rv .bnav-item:focus-visible {
  outline: 2px solid var(--brand-a, #7c3aed);
  outline-offset: 3px;
}

@media (max-width: 380px) {
  body.rv .bnav { gap: 2px; padding: 6px !important; }
  body.rv .bnav-item { width: 44px !important; height: 46px !important; }
  body.rv .bnav-item i { font-size: 19px !important; }
}

/* =========================================================
   2. LA FEUILLE APPLICATION
   ---------------------------------------------------------
   Ouverte par ouvrirAppSheet(), appelee depuis la barre.
   Valeurs de pages-communes.css, variables resolues :
   --gutter 18px, --r-xl 26px, --s2 8px, --s4 16px, --s5 22px.
   ========================================================= */
body.rv .app-sheet-ov {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1500 !important;
  display: none;
  align-items: flex-end !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
/* Le script pose « ouvert ». Les deux autres noms sont
   acceptes au cas ou il en change. */
body.rv .app-sheet-ov.ouvert,
body.rv .app-sheet-ov.on,
body.rv .app-sheet-ov.open {
  display: flex !important;
  animation: bh-voile-entre .25s cubic-bezier(.22, .61, .36, 1);
}
@keyframes bh-voile-entre { from { opacity: 0; } to { opacity: 1; } }

body.rv .app-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 76vh;
  overflow-y: auto;
  scrollbar-width: none;
  border: 0;
  border-radius: 26px;
  background: rgba(20, 20, 26, .97);
  -webkit-backdrop-filter: blur(26px);
          backdrop-filter: blur(26px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1),
              0 -18px 48px rgba(0, 0, 0, .6);
  padding: 8px 16px calc(22px + env(safe-area-inset-bottom));
  animation: bh-feuille-monte .32s cubic-bezier(.22, .61, .36, 1);
}
body.rv .app-sheet::-webkit-scrollbar { display: none; }
@keyframes bh-feuille-monte {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.rv .app-sheet,
  body.rv .app-sheet-ov.ouvert { animation: none; }
}

/* L'en-tete : la barrette et le titre dans la meme
   respiration, centres. */
body.rv .app-sheet-hd {
  text-align: center;
  padding: 8px 0 16px;
  border: 0 !important;
}
body.rv .app-sheet-grip {
  display: block;
  width: 38px; height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
body.rv .app-sheet-ttl {
  margin: 0;
  font-size: 16px; font-weight: 600;
  letter-spacing: -.025em;
  text-align: center;
  color: #fff;
}

/* Les entrees : icone ronde, titre, sous-titre, chevron. */
body.rv .app-sheet-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 13px 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  text-decoration: none;
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
  transition: background .18s ease, transform .12s ease;
}
body.rv .app-sheet-item + .app-sheet-item { margin-top: 8px; }
body.rv .app-sheet-item:hover  { background: rgba(255, 255, 255, .12) !important; }
body.rv .app-sheet-item:active { transform: scale(.99); }

body.rv .asi-ic {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 18px; color: #fff;
}
body.rv .asi-txt { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
body.rv .asi-txt small,
body.rv .asi-txt span {
  display: block;
  margin-top: 2px;
  font-size: 12px; font-weight: 400;
  color: rgba(255, 255, 255, .55);
}
body.rv .asi-go { flex-shrink: 0; color: rgba(255, 255, 255, .4); }

/* « Fermer » : un bouton pleine largeur, pas une croix. */
body.rv .app-sheet-close {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .12);
  transition: background .18s ease, color .18s ease;
}
body.rv .app-sheet-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .19);
}

/* =========================================================
   3. LA PLACE SOUS LE CONTENU
   ---------------------------------------------------------
   La barre flotte a 18 px et mesure 64 px : elle occupe
   jusqu'a 82 px. Sans ce degagement, le pied de page passe
   dessous.
   ========================================================= */
body.rv { padding-bottom: 120px; }